Django更新表的jsonresponse使屏幕变黑，就像打开模式一样；无法关闭它 [英] Django jsonresponse for updating table makes the screen go black like opening a modal; can not close it

问题描述

因此，如果我更新作者，则只想使用更新后的作者及其新信息来更新候选人表.问题是如果我这样做的话，整个屏幕会像打开模式一样变成黑色.并且该表未更新，但为空.如果在填写更新模版后不调用process_author来更新表，则不会出现黑屏.下面是代码:

So if I update a author I want to update the candidates table with only the updated author and its new information. The problem is if I do that that the whole screen turns black like opening a modal. And the table is not updated but empty. If I do not do a call to process_author to update the table after update modal has been filled in there will not be a dark screen. Below is the code:

<div id="authors-candidates-div">
<table id="authors-table" class="table">
  <thead>
  <tr>
    <th class="text-center" scope="col">ID</th>
    <th class="text-center" scope="col">Name</th>
    <th class="text-center" scope="col">Name original language</th>
    <th class="text-center" scope="col">Extra info</th>
    <th class="text-center" scope="col">Update/ Link</th>
  </tr>
  </thead>
  <tbody>
  {% for author in authors.all %}
    <tr>
      <th class="text-center" scope="row">{{ author.pk }}</th>
      <td class="text-center">{{ author.name }}</td>
      <td class="text-center">{{ author.name_original_language }}</td>
      <td class="text-center">{{ author.extra_info }}</td>
      <td class="text-center">
        <!-- Update author buttons -->
        <button type="button" id='init-btn{{ author.pk }}' class="btn btn-primary btn-danger" data-toggle="modal" data-target="#UpdateAuthorModal{{ author.pk }}">
          <span class="fa fa-pencil"></span>
        </button>
            <!-- Modal -->
    <div id="UpdateAuthorModal{{ author.pk }}" class="modal fade" tabindex="-1">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title col-md-10">Update Author</h5>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
            <div class="form-group">
                <label for="id_name_t">Name</label>
                <input type="text" name="name" maxlength="100" value="{{ author.name }}" class="form-control name" id="id_name{{ author.pk }}">
                <div class="">

                </div>
            </div>
              <div class="form-group">
                <label for="id_name_original_language_t">Name original language</label>
                <input type="text" name="name_original_language" maxlength="100" value="{{ author.name_original_language }}" class="form-control name_original_language" id="id_name_original_language{{ author.pk }}">
                <div class="">
                </div>
              </div>
              <div class="form-group">
                <label for="id_extra_info_t">Extra info</label>
                <input type="text" name="extra_info" maxlength="400" value="{{ author.extra_info }}" class="form-control extra_info" id="id_extra_info{{ author.pk }}">
                <div class="">

                </div>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" id="update-btn{{ author.pk }}" class="submit-btn btn btn-primary" data-form-url="{% url 'author-proces' publication.pk author.pk %}" data-dismiss="modal">Update</button>
          </div>
        </div>
      </div>
    </div>
        <!-- Link author buttons -->
        <button type="button" class="author-link btn btn-sm btn-danger" data-form-url="{% url 'link-author' publication.pk author.pk %}">
          <span class="fa fa-plus mr-2"></span>Link
        </button>
      </td>
    </tr>

<script>
$( document ).ready(function() {
    $('.modal.in').modal('hide');
});

$(function () {

$("#update-btn{{ author.pk }}").click(function(e) {
    e.preventDefault();
    var fd = new FormData();
    fd.append('csrfmiddlewaretoken', getCookie('csrftoken'));
    fd.append("name", $('#id_name{{ author.pk }}').val());
    fd.append("name_original_language", $('#id_name_original_language{{ author.pk }}').val());
    fd.append("extra_info", $('#id_extra_info{{ author.pk }}').val());
    $.ajax({
      url: $(this).attr('data-form-url'),
      data: fd,
      processData: false,
      contentType: false,
      type: 'POST',
        success:function(data) {
          $("#authors-candidates-div").html(data["table"]);
          {% comment %}
          $('#id_search_authors').val('');
          $.post("{% url 'search-authors' publication.pk %}", function(data2, status2){
                if(status2 === 'success') {
                    $("#authors-candidates-div").html(data2["table"]);
                }
            })
          {% endcomment %}
        }

    });
});
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
});
</script>
{% endfor %}

  </tbody>
</table>

<script>
$( document ).ready(function() {
    $('.modal.in').modal('hide');
});
$(function () {
$( ".author-link" ).click(function() {
    $.post($(this).attr('data-form-url'), function(data, status){
        if(status === 'success') {
            $("#authors-div").html(data["table"]);
            $('#id_search_authors').val('');
            $.post("{% url 'search-authors' publication.pk %}", function(data2, status2){
                if(status2 === 'success') {
                    $("#authors-candidates-div").html(data2["table"]);
                }

            })
        }
    });
    })
});
</script>
</div>

视图中的流程作者代码:

The process author code in the view:

@login_required(login_url='/accounts/login/')
def process_author(request, pkb=None, pk=None):
    data = dict()
    obj, created = Author.objects.get_or_create(pk=pk)

    post_mutable = {'name': request.POST['name'], 'name_original_language': request.POST['name_original_language'], \
                    'extra_info': request.POST['extra_info']}

    form = AuthorForm(post_mutable or None, instance=obj)

    if request.method == 'POST':
        if form.is_valid():
            instance = form.save()
            pub = Publication.objects.get(pk=pkb)
            pub.author.add(instance)
            pub.save()
            if pkb and not pk:
                data['table'] = render_to_string(
                    '_authors_table.html',
                    {'publication': pub},
                    request=request
                )
                return JsonResponse(data)
            elif pk and pkb:
                data['table'] = render_to_string(
                    '_authors_candidates_table.html',
                    {'publication': pub, 'authors': Author.objects.get(pk=pk)},
                    request=request
                )
                return JsonResponse(data)
                #return HttpResponse(status=200)

    return render(request, 'error_template.html', {'form': form}, status=500)

在模式关闭后，以某种方式触发了网站的屏幕截图为打开模式":

And a screenshot of the site were open modal is somehow triggered after modal close:

推荐答案

我放弃了更新多模式表的工作.相反，我更新了主表.如果用户正在更新文件，我认为他们打算将其链接到出版物.这是一个奇怪的问题，因为搜索文件还会更新候选人表.

I gave up updating the multi modal table. Instead I updated the main table. If the user is updating a file I assume they have the intention to link it to the publication. It is a strange problem because searching for files is also updating the candidates table.

这篇关于Django更新表的jsonresponse使屏幕变黑，就像打开模式一样；无法关闭它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！