web-dev-qa-db-ja.com

Bootstrap= Modal Dynamic Content

いつでも変更できる動的コンテンツをロードする方法が必要です。 Bootstrap documentation

<a data-toggle="modal" href="remote.htm" data-target="#modal">Click me</a>

jQueryの。loadを使用しているのは、コンテンツの読み込みのみonceです。モーダルコンテンツdivにコンテンツを注入します。前述のように、このモーダルの内容はいつでも変更できるため、別の方法が必要です。何か案は？

TL; DR-モーダルが1回ではなく開くたびに動的コンテンツ（リモート）を読み込むメソッドを探しています（デフォルトBootstrapモーダル）。

jqueryajaxtwitter-bootstraptwitter-bootstrap-3
13
KaekeaSchmear

ユーザーが遅延を許容できる場合は、showイベントが発生するたびにコンテンツをリロードします。

$('#modal').on('show.bs.modal', function(){
    $.get("remote.htm", function(data){
        $('#modal').find('.modal-content').html(data);
    })
})

必要に応じてエラー処理とパラメーターを追加します

12
Stephen Thomas

次を使用して、モーダルのキャッシュを適切にクリアできます。

$('#your-modal').removeData('bs.modal');

https://github.com/twbs/bootstrap/pull/7935#issuecomment-21166069 を参照してください
おそらく、モーダルのhidden.bs.modalイベントのイベントハンドラーでこれを実行する必要があります。

おそらく、最初にdata-remoteを使用する代わりに、クライアント側のテンプレートと必要なデータを読み込むための小さなカスタムJavaScriptを使用する方が良いでしょう。特にBootstrapはremoteモーダルオプションを廃止しました以来。

11
cvrebert

この男には、汚いが機能するソリューションがあります： http://www.whiletrue.it/how-to-update-the-content-of-a-modal-in-Twitter-bootstrap/

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

になる：

<a href="javascript:$('#modal .modal-body').load('remote.html',function(e){$('#modal').modal('show');});">Click me</a>
1
jakealbaugh