[解決済み】Twitter bootstrapのリモートモーダルでは、毎回同じコンテンツが表示される

質問

Twitter bootstrapを使用しており、モーダルを指定しています。

<div class="modal hide" id="modal-item">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Update Item</h3>
    </div>

    <form action="http://www.website.com/update" method="POST" class="form-horizontal">

    <div class="modal-body">
        Loading content...
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button class="btn btn-primary" type="submit">Update Item</button>
    </div>

    </form>

</div>

そして、リンク

<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

これらのリンクのいずれかを初めてクリックすると、正しいコンテンツが表示されますが、他のリンクをクリックすると、初めて読み込まれた同じコンテンツが表示され、コンテンツは更新されません。

クリックされるたびに更新されるようにしてほしい。

P.S. : しかし、Bootstrap のネイティブなモーダルリモート機能で可能かどうかを知りたいのです。

解決方法は？

問題は2つあります。

第一 で指定された要素に永続的にアタッチされます。 data-target を呼び出すだけで、それ以降、そのモーダルを表示するための呼び出しは toggle() の値は更新されません。 options . そのため href 属性が異なるリンクでは、モーダルがトグルされたときに remote が更新されない。 ほとんどのオプションでは、オブジェクトを直接編集することによってこれを回避することができます。 例えば

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

しかし、この場合、それはうまくいきません。

第二 の場合、Modalプラグインはリモートリソースを読み込むように設計されています。 をコンストラクタで指定します。 を変更した場合、残念ながら options.remote , が再読み込みされることはありません。 .

簡単な対処法は、次にトグルする前にモーダルオブジェクトを破棄することです。1つのオプションは、それが非表示を終了した後、単にそれを破壊することです。

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

<サブ 注 必要に応じてセレクタを調整します。これは最も一般的なものです。

プランカー

あるいは、モーダルを起動するリンクが以前のものと異なるかどうかをチェックするような、もっと複雑な方式を考えてみるのもよいでしょう。 異なる場合は破棄し、異なる場合は再読み込みの必要はありません。