用于更新 table 的 Django jsonresponse 使屏幕像打开模式一样变黑；无法关闭它

Question

因此，如果我更新作者，我想更新候选人 table，仅使用更新后的作者及其新信息。问题是，如果我这样做，整个屏幕就会像打开模态一样变黑。 table 没有更新，而是空的。如果在填充更新模式后我不调用 process_author 来更新 table，则不会出现黑屏。下面是代码：

<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>

视图中的流程作者代码：

@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)

打开模态的站点屏幕截图在模态关闭后以某种方式触发：

Answer 1

您有 一个用于所有模式的关闭按钮：

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

每个模式需要多个关闭按钮。您可以将 id 用于 data-dismiss.

改为：

<button type="button" class="btn btn-default" data-dismiss="#UpdateAuthorModal{{ author.pk }}">Close</button>

Answer 2

我放弃更新多模式table。相反，我更新了主要 table。如果用户正在更新文件，我假设他们有意将其 link 发布到出版物中。这是一个奇怪的问题，因为搜索文件也在更新候选 table.

用于更新 table 的 Django jsonresponse 使屏幕像打开模式一样变黑；无法关闭它

Django jsonresponse for updating table makes the screen go black like opening a modal; can not close it

html

javascript

django

jquery

modal-dialog