[解決済み] モーダルでコンテンツを再読み込みする (twitter bootstrap)

質問

twitter bootstrapのモーダルポップアップを使っています。

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

このa要素でajaxを使ってコンテンツを読み込むことができますね。

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

今度は、同じモーダルを別の URL で開く必要があります。このモーダルは、データベースからエンティティを編集するために使用します。そのため、エンティティの編集をクリックすると、ID を使用してモーダルを読み込む必要があります。

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

1番のリンクをクリックすると、正常に動作します。しかし、リンク番号 2 をクリックすると、モーダル コンテンツがすでに読み込まれているため、リンク番号 1 のコンテンツが表示されます。

twitter bootstrapのモーダルポップアップで、ajaxで読み込んだコンテンツを更新またはリセットするにはどうすればよいですか。

どのように解決するのですか？

私も同じ問題を抱えています。これを行う方法は、data-toggle属性を削除し、リンクのためのカスタムハンドラを持つことでしょう。

の行の何か。

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

後で試して、コメントを投稿します。