Bootstrap modalは一回のデータだけをロードする解決方法(推奨)


1.Bootstrapモードダイアログと簡単な使用

 <div id="myModal" class="modal hide fade">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">x</button>
 <h3>     </h3>
 </div>
 <div class="modal-body">
 <p>     </p>
 </div>
 <div class="modal-footer">
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">  </a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">  </a>
 </div>
</div>
ボタンやリンクを使って直接にモダリティダイアログを呼び出すことができます。これは簡単な使い方です。

<button type="button" data-toggle="modal" data-target="#myModal">     </button>
<a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">     </button>
2.remoteオプションを使って、モダリティダイアログにページを読み込みます。modal-bodyに
二つの方法があります。一つはリンクを使うこと、もう一つはシナリオを使うことです。
2.1リンクの使用

<a href="page.jsp" rel="external nofollow" data-toggle="modal" data-target="#myModal">     </a>
このリンクをクリックすると、Page.jspの内容がダイアログにロードされます。modal-bodyには、ダイアログが表示されます。
2.2スクリプトを使う

$("#myModal").modal({
 remote: "page.jsp"
});
このスクリプトの効果はリンクを使うのと同じです。このスクリプトが実行されると、Page.jspの内容がダイアログにロードされます。modal-bodyには、ダイアログが表示されます。
この2つの方法の背後には、BootstrapがjQueryのロードを呼び出す方法があり、サーバー側からPage.jspページがロードされています。しかし、このロードは一回だけ発生します。後は何回リンクをクリックしても、あるいは何回かスクリプトを実行しても、remoteオプションに伝達された値を変更しても、ダイアログは再びページを読み込まないので、本当に困ります。でも問題は解決できます。
3.データを削除して、ダイアログを開くたびにページを再読み込みすることができます。
関連文書を検索して調べたら、ダイアログのhiddenイベントに文を書いてもいいです。

$("#myModal").on("hidden", function() {
 $(this).removeData("modal");
});
ダイアログを開くたびにデータを削除することもできます。効果は同じです。
注:上のコードはBootstraphv 2に基づいています。Bootstraphe v 3を使うと、モーダルダイアログのHTMLとイベントの書き方が違っています。例えば、上のhiddenイベントについては、下記のように書きます。

$("#myModal").on("hidden.bs.modal", function() {
 $(this).removeData("bs.modal");
});
締め括りをつける
以上は小编が绍介したBootstrap modalに一回だけデータをロードする解决方法です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。