Question

好的，所以我想要一个显示查询结果的表格。我希望截断表中的数据，并且用户能够在模态中查看完整数据。

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

所以我的问题是处理这种类型的动态请求的最佳方法是什么？我将如何实现它？我应该尝试使用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>

Answer 1

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

将此代码插入您的点击功能。

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

每次点击事件

1 个答案: