ブートストラップ・モダルのダイナミック・テーブルの内容をリフレッシュ

Question

私はダイナミック・テーブルを持つブートストラップ・モーダルを持っています。ここで は、モーダルポップアップをトリガーするボタンです：

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

ここでは、このボタンがクリックされたときに呼び出される関数です。クリックすると、ajax呼び出しが実行され、その応答は、モーダルの本体としてレンダリングされるhtmlページ（関数スニペットの後の部分を参照）です。あなたは、モーダルを閉じた後、私は、モーダルからデータを削除し、私の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呼び出しがあります。モーダルの身体とDataTableを設定し、モーダル、WITHIN 1を埋めるためにデータを返す1は。

問題は、2回目にモーダルを開くと、データテーブルからのデータが欠落していますが、ajaxコールは正常に実行されます（サーバーログで確認できます）。テーブルがリロードされていないようです。あなたはこの

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

はDOMからモーダルを削除する実行すると

Answer 1

問題があります。あなたのajax呼び出しの成功にjavascriptはDOMのモーダルを見つけることができません。

ソリューション： ではなく.removeの（）（）

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