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

Posted 2023-02-24

【中文标题】在每个点击事件上重置/刷新模态数据

【英文标题】：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 很陌生，你能指点我的一些例子，这样我就可以了解我的方位了吗？

有类似问题***.com/questions/18995461/…

【参考方案1】：

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

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

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