私はダイナミック・テーブルを持つブートストラップ・モーダルを持っています。ここで は、モーダルポップアップをトリガーするボタンです:ブートストラップ・モダルのダイナミック・テーブルの内容をリフレッシュ
<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">×</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からモーダルを削除する実行すると
は、あなたの答えをありがとうございましたモーダルの体クリアする.empty使用。 私はそれを試しましたが、運がありません... データテーブルにはまだデータがありません – FunnyJava
あなたはAjaxの成功関数のデータ変数にデータテーブルを取得していますか? –
'#TableFilledWithDataThroughAjaxCall' '$(data).insertAfter( "#MainContentID");'の内容は、このdivにIDを設定するとします。私は理解していません –