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

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

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

 1 11044ab4e39092bf3655a081d6df70d6 2     0b561c7c414147a96bbbb8cc10c3d06d 3         6e52c62ccaa796a4ccb90a0458fc6482x65281c5ac262bf6d81768915a4a77ac0 4         684271ed9684bde649abda8831d4d355对话框标题39528cedfa926ea0c01e69ef5b2ea9b0 5     16b28748ea4df4d9c2150843fecfba68 6     6e1ceff927595656120650f97442eabc 7         e388a4556c0f65e1904146cc1a846bee对话框主体94b3e26ee717c64999d7867364b1b4a3 8     16b28748ea4df4d9c2150843fecfba68 9     fcea287e1681f6566fd9116658b8e4f010         3967e4ba8273165820a9b7674e47f6ae取消5db79b134e9f6b82c0b36e0489ee08ed11         68ea5ffc0ceb7fd5909bec72cbe1fb30确定5db79b134e9f6b82c0b36e0489ee08ed12     16b28748ea4df4d9c2150843fecfba6813 16b28748ea4df4d9c2150843fecfba68

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

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

d6301f9ab9f294fdeb81d11564d75ad2打开对话框65281c5ac262bf6d81768915a4a77ac04cbacbf3366c8120d74e550377e58870打开对话框65281c5ac262bf6d81768915a4a77ac0

 <br/>

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

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

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

2.1 リンクを使用する

c06a237a3239f2443464e77605828245打开对话框5db79b134e9f6b82c0b36e0489ee08ed

このリンクをクリックすると、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 サイトの他の関連記事を参照してください。