Bootstrap 4 モーダル リモート データの読み込み

Twitter Bootstrap (v4 アルファ) の最新リリースでは、リモート コンテンツをモーダルは削除されました。この機能は Bootstrap 3 には存在していましたが、現在はサポートされていません。

問題

data-remote 属性を使用してブートストラップのモーダルにリモート コンテンツをロードしようとしたとき4、モデル本体は空のままで、リクエストは指定されたアドレスに送信されません。 URL.

解決策

この問題を解決するには、JavaScript を使用してリモート コンテンツをモーダル本文に手動でロードします。以下に例を示します:

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target") ' .modal-body').load($(this).data("remote"));
    });  

このコードは、data-toggle="modal" 属性を持つすべての要素にイベント リスナーをアタッチします。これらの要素のいずれかがクリックされると、要素からデータ リモート値が取得され、jQuery の .load() メソッドを使用してリモート コンテンツがモーダル本文にロードされます。

注:非推奨のリモート オプションは Bootstrap 4 で削除されており、クライアント側のテンプレート、データ バインディング フレームワークを使用するか、示されているように手動で jQuery.load() を呼び出すことによって実装することをお勧めします。 その上。