モーダルでコンテンツをリロード（twitterブートストラップ）

Twitterブートストラップのモーダルポップアップを使用しています。

<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ブートストラップモーダルポップアップで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"); 
    });
});

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

モーダルが閉じているときにデータをアンロードするには、これをBootstrap 2.xで使用できます。

$('#myModal').on('hidden', function() {
    $(this).removeData('modal');
});

そして、Bootstrap 3（https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516）では：

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Modalプラグインのhideメソッドの最後にこの行を追加することで、Modalに強制的にポップアップを更新させることができます（bootstrap-transition.js v2.1.1を使用している場合は、836行目にあるはずです）。

this.$element.removeData()

またはイベントリスナーを使って

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})

Bootstrap 3では、「hidden.bs.modal」イベントハンドラーを使用してモーダル関連データを削除し、次にポップアップを強制的にリロードすることができます。

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

他の回答に基づいています（みんなに感謝します）。

.htmlを呼び出すだけでコンテンツ全体がワイプされ、モーダルが実行した後にコンテンツが読み込まれないため、コードを調整して動作させる必要がありました。だから私は単にモーダルのコンテンツ領域を探し、そこにHTMLのリセットを適用しました。

    $(document).on('hidden.bs.modal', function (e) {
        var target = $(e.target);
        target.removeData('bs.modal')
              .find(".modal-content").html('');
    });

コントロールがブートストラップを使用しているため、モーダルがロードされる直前にいくつかの醜いジャンプを取得しているため、まだ受け入れられている回答でうまくいく場合があります。

上記の受け入れられた例よりも少し圧縮されています。data-toggle = modalをオンにして、現在クリックされているもののデータターゲットからターゲットを取得します。これにより、ターゲットモーダルのIDが何であるかを知る必要がなくなり、同じものを再利用するだけです！少ないコード=勝つ！これを変更して、必要に応じてモーダルのタイトル、ラベル、ボタンをロードすることもできます。

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

リンクの例：

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

Softlionの回答に小さな変更を加えたので、すべてのモーダルが非表示で更新されません。data-refresh = 'true'属性を持つモーダルは更新されるだけで、その他は通常どおり機能します。こちらが修正版です。

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

次のように属性を使用します。

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

これにより、data-refresh = 'true'のモーダルのみが確実に更新されます。また、新しい値が読み込まれるまで古い値が表示されるため、モーダルhtmlをリセットしています。これにより、htmlの空の値が修正されます。

これは私のために働いたコーヒースクリプトバージョンです。

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

すべてのバージョンのtwitterbootstrapで動作します

JavaScriptコード：

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

モーダルへのリンクは

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

モーダルをポップアップ

<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>

私もこの問題に行き詰まり、モーダルのIDが同じであることがわかりました。複数のモーダルが必要な場合は、モーダルの異なるIDが必要です。動的IDを使用しました。これが私のコードですhaml：

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

あなたはこれを行うことができます

<div id="<%= some.id %>" 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 data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

これがうまくいくことを願っています。

あなたはこれを試すことができます：

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

モーダルが閉じたときにAJAXロードされたコンテンツを削除したかったので、他の人が提案した行を調整しました（coffeescript構文）：

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

var $ table = $（ '＃myTable2'）;
$ table.bootstrapTable（ 'destroy'）;

私のために働いた

ステップ1：と呼ばれるモーダルのラッパーを作成しますclone-modal-wrapper。

ステップ2：という空のdivを作成しますmodal-wrapper。

ステップ3：モーダル要素をからclone-modal-wrapperにコピーし modal-wrapperます。

ステップ4：のモーダルを切り替えmodal-wrapperます。

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <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>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});