Question

使用Django for循环它从数据库生成一个分页列表。这有效。生成的列表在每个条目的右侧都有一个删除按钮。

在同一页面加载我使用django for循环生成与每个删除按钮匹配的单独模态窗口。因此按钮将调用模态ID = ###并且存在匹配的模态###。 HTML似乎完美呈现。

当我删除TOP（页面上的第一个条目）时，它就像一个魅力，我可以整天这样做，条目向上移动并被删除。

问题：当我选择第二个位置或更低的按钮时，屏幕变灰并冻结，需要重新加载才能再次响应。这种模式是可重复的。

HTML：

{% load static %}


{% block content %}
<link rel="stylesheet" href="{% static "css/cabinet_table.css"%}">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
  <div class="table-responsive">
    <table class="table table-hover">
      <th colspan="3"style="text-align: center;"><h2>{{ user.username|capfirst }} Notes</h2></th>
      {% for note in note_list %}
        <tr>
          <td ><a href="{% url "cabinet:note_edit" note.id %}">{{ note.title }}</a></td>
          <td>{{ note.text|truncatewords:15 }}</td>
          <td><button type="button" class="btn btn-info btn-success" data-toggle="modal" data-target="#deleteModal{{ note.id }}">Delete</button></td>

        </tr>
      {% endfor %}
    </table>
  </div>


<!-- Pagination below -->
  {% if note_list.has_other_pages %}
    <ul class="pagination">
      {% if note_list.has_previous %}
        <li><a href="?page={{ note_list.previous_page_number }}">&laquo;</a></li>
      {% else %}
        <li class="disabled"><span>&laquo;</span></li>
      {% endif %}
      {% for i in note_list.paginator.page_range %}
        {% if note_list.number == i %}
          <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
        {% else %}
          <li><a href="?page={{ i }}">{{ i }}</a></li>
        {% endif %}
      {% endfor %}
      {% if note_list.has_next %}
        <li><a href="?page={{ users.next_page_number }}">&raquo;</a></li>
      {% else %}
        <li class="disabled"><span>&raquo;</span></li>
      {% endif %}
    </ul>
  {% endif %}
  </div>
  <div class="col-lg-2">
  </div>

{% include 'cabinet/_note_list_modal.html' %}


{% endblock %}

包含的HTML（模态生成）：

{% for note in note_list %}

<!-- Modal {{ note.id }} -->
<div class="modal fade" id="deleteModal{{ note.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel{{ note.id }}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel{{ note.id }}">Delete Note</h4>
      </div>
      <div class="modal-body">
        <h4>Title :</h4> {{ note.title }}<br>
        <h4>Idea:</h4> {{ note.text|truncatewords:25 }}
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger" onclick="settleUp{{ note.id }}()" >Delete</button>
      </div>
    </div>
  </div>
</div>
<div id="hiddenForm{{ note.id }}" style="display: none" class="visibility=hidden">
  <form class="" action="/fc/delete/{{ note.id }}" name="hiddenForm{{ note.id }}" method="post">
    {% csrf_token %}
    <input type="hidden" name="deleteNote{{ note.id }}" id="deleteNote{{ note.id }}" value="{{ note.id }}">
    <!-- <button type="submit" name="betBalance">Update Balance</button> -->
  </form>
<script type="text/javascript">
  function settleUp{{ note.id }}(){
    document.forms.hiddenForm{{ note.id }}.submit()
  }
</script>
{% endfor %}

目标：点击任何删除按钮弹出其模态并工作。

感谢您的帮助。 PS使用inspect，我不知道如何使用，我看到控制台没有错误。

Answer 1

在另一个问题中解决的问题是，缺少DIV标签。感谢所有看过的人。

Django与Bootstrap 2nd Modal（或后续的模态）无法正常工作

1 个答案: