在 Bootstrap 模式中刷新动态表格内容

Question

我有一个带有动态表的 Bootstrap 模式。 这是触发模式弹出的按钮：

<button class="orgBrowseButton">  <i class="fa fa-search"></i></button>

这是单击此按钮时调用的函数。当它被点击时，会执行一个 ajax 调用，它的响应是一个 html 页面（在函数 sn-p 之后见下文），它被呈现为 modal 的主体。您可以看到，在模态关闭后，我从模态中删除了数据，并从我的 jsp 中删除了模态本身：

$(".orgsBrowseButton").click(function (e) {
        e.preventDefault();
        $.ajax({
            url : 'actionToCall.action',//this is a struts action
            jsCallback:function(data){
                callbackFunction(data);
            },
            cache: false
        }).done(function( data ) {
            $(data).insertAfter("#MainContentID");//a div in my jsp
            $(".modal").modal();
            $('body').on('hidden.bs.modal', '.modal', function (e) {
                $(e.target).removeData('bs.modal');
                $('.modal').remove();
            });
        });
    });

这就是模态。此模式包含一个表单和一个表，其数据来自 ajax 响应。生成表格的代码是自定义的，所以我不能在这里发布。这是一个动态表。

    <div class="modal" id="popup" role="dialog">
      <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times</button>
            <h4 class="modal-title">Title</h4>
        </div>
        <div class="modal-body">
           <form class="form-horizontal" id="searchOrgsForm" action="" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2" for="">Name:</label>
                <div class="col-sm-10"> 
                    <input class="form-control" type="text" name="orgName"/>
                </div>
            </div>
            <div class="form-group"> 
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Search</button>
                </div>
            </div>
            <table class="TableFilledWithDataThroughAjaxCall">
            </table>
         </form>
     </div>
     <div class="modal-footer">
         <button id="closeButton" class="btn btn-default" type="button" data-dismiss="modal"></button>
     </div>
   </div>
</div>

所以有 2 个 ajax 调用：一个返回数据以填充模态框的主体，另一个在模态框内，填充数据表。

问题是我第二次打开模态时，数据表中的数据丢失了，虽然ajax调用正常执行（我可以在服务器日志中看到）。该表似乎没有重新加载。

Answer 1

问题是当您执行此操作时

$('.modal').remove();    

从 DOM 中移除模态框。在您的 ajax 调用成功时，javascript 无法在 DOM 中找到模式。

解决方案： 而不是 .remove() 使用 .empty() 来清除模态框的主体

$('.modal-body').empty()