Question

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

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

这是单击此按钮时调用的函数。单击它时，将执行ajax调用，其响应是一个html页面（请参见下面的函数代码段），该页面呈现为模式的主体。您可以看到我在关闭模态后从模式中移除数据，并从模式中删除模态：

$(".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调用：一个返回数据以填充模态的主体，一个WITHIN模式，填充数据表。

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

Answer 1

问题在于你执行此操作

<script>
    var grid = document.querySelector('#grid');
    var item = document.createElement('article');

    // Note in my case item is going to be my complied knockout template
    salvattore.appendElements(grid, [item]);
</script>

从DOM中删除模态。关于你的ajax调用成功javascript无法在DOM中找到模态。

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

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

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

1 个答案: