Question

我试图改变我的表当前的工作方式。现在，通过循环遍历通过我的Django应用程序的views.py中的上下文传递给它的所有样本来创建表，这样可以正常工作。但是，我想要做的更改是在单击删除示例按钮时创建模态，在删除它之前向用户显示警告消息。我遇到的问题是模态中的{{ sample.id }}正在识别表中的第一个样本（似乎不是for循环的一部分）。任何帮助将不胜感激！

<table class="table table-themed sample-table">
    <tr>
        <th>Status</th><th>Mh to Mh</th><th>Shot & Sec</th><th>Date Created</th><th>Manage</th>
    </tr>
    {% for sample in samples %}
        <tr>
            <td>{{ sample.status }}</td>
            <td>{{ sample.mh_to_mh }}</td>
            <td>{{ sample.shot_and_sec }}</td>
            <td>{{ sample.date_created }}</td>
            <td>
                <a class="btn btn-primary" href="{% url 'contracts:view_sample' sample.id %}">View Details</a>
                <a class="btn btn-danger btn-sm" href="{% url 'contracts:delete_sample' sample.id %}">Delete</a>
                <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Delete Modal</button>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <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">Delete Sample</h4>
                          </div>
                          <div class="modal-body">
                            <p>Are you sure that you want to delete this {{ sample.id }} sample?</p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                            <a class="btn btn-danger btn-sm" href="{% url 'contracts:delete_sample' sample.id %}">Delete</a>
                          </div>
                        </div>
                     </div>
                 </div>
            </td>

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

Answer 1

HTML中的多个元素不应具有相同的ID。虽然没有抛出任何错误，但JS总是会引用带有ID的第一个元素（在本例中为myModal）
最好将模态移出并传递打开时所需的数据。拥有你的HTML

<table class="table table-themed sample-table">
    <tr>
        <th>Status</th>
        <th>Mh to Mh</th>
        <th>Shot & Sec</th>
        <th>Date Created</th>
        <th>Manage</th>
    </tr>
    {% for sample in samples %}
    <tr>
        <td>{{ sample.status }}</td>
        <td>{{ sample.mh_to_mh }}</td>
        <td>{{ sample.shot_and_sec }}</td>
        <td>{{ sample.date_created }}</td>
        <td>
            <a class="btn btn-primary" href="{% url 'contracts:view_sample' sample.id %}">View Details</a>
            <a class="btn btn-danger btn-sm" href="{% url 'contracts:delete_sample' sample.id %}">Delete</a>
            <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal"
                    data-id="{{ sample.id }}"
                    data-url="{% url 'contracts:delete_sample' sample.id %}">Delete Modal
            </button>
        </td>
    </tr>
    {% endfor %}
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">Delete Sample</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure that you want to delete this <span id="sampleId"></span> sample?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                <a class="btn btn-danger btn-sm" href="" id="actualDeleteBtn">Delete</a>
            </div>
        </div>
    </div>
</div>

然后你需要一些JavaScript来从数据属性中设置正确的值

$('#myModal').on('shown.bs.modal', function(event) {
    $("#sampleId").text($(event.relatedTarget).data('id'));
    $("#actualDeleteBtn").attr('href', $(event.relatedTarget).data('url'));
})

将信息传递给for循环中的模态

1 个答案: