模板中的多个模式破坏布局并在 post 上进入黑屏

Question

我正在使用 django，我正在 html 的 for 循环中为每个对象制作更新模式。我还为每个更新模式制作了一个新脚本。问题是 table 的布局被打乱了。每次我更新一个对象时，我都会看到一个黑屏，就像打开一个没有模态的模态一样。谁能帮忙？这是我的 html:

<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 }}" data-form-url="{% url 'author-proces' publication.pk author.pk %}">
          <span class="fa fa-pencil"></span>
        </button>
            <!-- Modal -->
    <div id="UpdateAuthorModal{{ author.pk }}" class="modal fade" role="dialog">
      <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-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>

  </tbody>
</table>
<script>
$("#update-btn{{ author.pk }}").click(function(e) {
    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: $('#init-btn{{ author.pk }}').attr('data-form-url'),
      data: fd,
      processData: true,
      contentType: false,
      type: 'POST',
        success:function(data) {
          $("#authors-candidates-div").html(data["table"]);
        }
    });
});
</script>
{% endfor %}
<script>
$( ".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"]);
                }

            })
        }
    });
    });

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

Answer 1

Table 细节被打乱了，因为 </tbody> 标签在 django for 循环中。结果创建了很多 </tbody> 个标签。在下面的代码中修改如下（只需复制此代码）：

<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 }}" data-form-url="{% url 'author-proces' publication.pk author.pk %}">
          <span class="fa fa-pencil"></span>
        </button>
            <!-- Modal -->
    <div id="UpdateAuthorModal{{ author.pk }}" class="modal fade" role="dialog">
      <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-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>
$("#update-btn{{ author.pk }}").click(function(e) {
    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: $('#init-btn{{ author.pk }}').attr('data-form-url'),
      data: fd,
      processData: true,
      contentType: false,
      type: 'POST',
        success:function(data) {
          $("#authors-candidates-div").html(data["table"]);
        }
    });
});
</script>
{% endfor %}

  </tbody>
</table>

<script>
$( ".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"]);
                }

            })
        }
    });
    });

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

模板中的多个模式破坏布局并在 post 上进入黑屏

Multiple modals in template ruins layout and enters dark screen on post

html

django

ajax

jquery

modal-dialog