Bootstrap がリモート データを 1 回しかロードしない問題を解決する

要約: フロントエンド フレームワーク Bootstrap のモーダル ダイアログ ボックスの場合、リモート オプションを使用して URL を指定できます。これにより、ダイアログ ボックスがポップアップ表示されたときに、このアドレスから .modal-body にデータが自動的に読み込まれます。初めての場合、ロードされるのは 1 回だけですが、この問題はイベントで RemoveData() メソッドを呼び出すことで解決できます。

1. ブートストラップモーダルダイアログと簡単な使い方

 1 <div id="myModal" class="modal hide fade"> 2     <div class="modal-header"> 3         <button type="button" class="close" data-dismiss="modal">x</button> 4         <h3>对话框标题</h3> 5     </div> 6     <div class="modal-body"> 7         <p>对话框主体</p> 8     </div> 9     <div class="modal-footer">10         <a href="#" class="btn" data-dismiss="modal">取消</a>11         <a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>12     </div>13 </div>

表示効果は以下の図に似ています:

ボタンまたはリンクを使用してモーダルダイアログを直接呼び出すことができます。使い方は簡単です:

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button><a href="#myModal" role="button" class="btn" data-toggle="modal">打开对话框</button>

 <br/>

これは、ダイアログ ボックスに静的なコンテンツのみを表示でき、より強力な効果を実現するには、ダイアログ ボックスのリモート オプションを使用します。

2. リモート オプションを使用して、モーダル ダイアログにページを .modal-body にロードさせます

2 つの方法があります。1 つはリンクを使用する方法、もう 1 つはスクリプトを使用する方法です。

2.1 リンクを使用する

<a href="page.jsp" 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 のload() メソッドを呼び出して、サーバーから page.jsp ページをロードします。ただし、この読み込みは 1 回だけ行われ、リンクをクリックしたり、スクリプトを複数回実行したり、リモート オプションに渡される値を変更したりしても、ダイアログ ボックスはページを再読み込みしません。 。しかし、問題はまだ解決できます。

3. ダイアログ ボックスが開かれるたびにページをリロードできるように、データを削除します。

関連するドキュメントを検索して調べた結果、ダイアログ ボックスの非表示イベントにステートメントを記述するだけで十分であることがわかりました。

毎回ダイアログ ボックスを開く前にデータを削除することもできます。効果は同じです。

注:

上記のコードは Bootstrap v2 に基づいています。Bootstrap v3 を使用する場合、たとえば上記の非表示イベントの場合、モーダル ダイアログ ボックスの HTML とイベントの記述方法は多少異なります。書かれる:

$("#myModal").on("hidden", function() {
    $(this).removeData("modal");
});

以上がBootstrap がリモート データを 1 回しかロードしない問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。