在每个点击事件上重置/刷新模态数据答案

【问题标题】：reset/refresh modal data on each click event在每个点击事件上重置/刷新模态数据
【发布时间】：2018-01-14 19:06:15
【问题描述】：

好的，我正在尝试创建一个显示查询结果的表格。我希望表中的数据被截断，并且用户能够以模式查看完整数据。

我已经尝试实现这一点，如下所示。但是，模式在第一行的每一列中显示相同的结果。似乎一旦模态获取数据，它就不会在迭代时动态更改以加载新数据。

所以我的问题是处理这种类型的动态请求的最佳方式是什么，我将如何实现它？我应该尝试使用 ajax 请求动态加载数据，还是有办法在每次点击时重置该模式以加载新数据？

请看下面的代码，谢谢！

模板：

<td class='test'>{{ value.4 }}<a href='#' id="trigger_{{ forloop.counter }}"><img src='{% static "img/expand-icon2.png" %}' id="expand"></a>
    {% if methods %}
    {% for key2, value in methods %}{% ifequal key2 key %}
    <div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×
            </button>
            <h4 class="modal-title" id="classModalLabel">
                Triples:
                </h4>
        </div>
        <div class="modal-body">
            <table id="classTable" class="table table-bordered">
            <thead>
                <tr>
                <th style="width: 4%">#</th>
                <th>Subject</th>
                <th>Predicate</th>
                <th>Object</th>
                <tr>
            </thead>
            <tbody>
                {% for item in value %}
                    <tr>
                    <td scope="row">{{ forloop.counter }}.</td>
                    <td>{{ item }}</td>
                    <td>{{ item }}</td>
                    <td>{{ item }}</td>
                    </tr>

                {% endfor %}
            </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
            Close
            </button>
        </div>
        </div>
    </div>
    </div>
    {% endifequal %}
    {% endfor %}
    {% endif %}
</td>
{% else %}
<td>No Provenance Terms Found</td>
{% endif %}

Javascript：

<script type="text/javascript">

    $('.test').each(function(){
      var trig = '[id^="trigger_"]';
      $(trig).click(function(){
        $('#classModal').modal('show');
        return false;
      })

    });
  </script>

【问题讨论】：

您可以将数据存储在 javascript 的数组中。当您单击表格的任何一行时，使用不同的数据项呈现模式。
嗨，Guinner，感谢您的评论。我对 javascript 很陌生，你能指点我的一些例子，这样我就可以了解我的方位了吗？
有类似问题stackoverflow.com/questions/18995461/…

标签： javascript ajax django twitter-bootstrap

【解决方案1】：

您可以使用此 jquery 重新加载模式。在这里，您可以使用 .modal-body1 类来重置确切的数据字段。你可以使用任何类名。

在您的点击函数中插入此代码。

$(document).ready(function() {
   $(".modal").on("hidden.bs.modal", function() {
   $(".modal-body1").html("");
   });
 });

【讨论】：