クローズ時にブートストラップリモートモーダルコンテンツをクリアするにはどうすればよいですか？

Question

私はリモートコンテンツを持つモーダルを起動しています（ただし、同じドメイン上にあります）。モーダルは同じページの異なる内容で何度も開くことができるので、閉じるときにの部分にclearの部分が必要です。

私はこのようにそれを実行しようとしました：

function close_modal() 

{ 

    $('.modal').modal('hide'); 

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


} 

しかし、私は別のモーダルターゲットを開いたときに、以前のコンテンツは一瞬のためにまだ表示されているいくつかの理由があります。私はまた、ソースコードをチェックし、以前にロードされたコンテンツがまだそこにあります。これをどうやって解決するのですか？ここに私のマークアップは次のとおりです。

$('a[rel=modal]').on('click', function(evt) { 
    evt.preventDefault(); 
    var modal = $('#modal').modal(); 
    modal 
     .find('.modal-body') 
     .load($(this).attr('href'), function (responseText, textStatus) { 
      if (textStatus === 'success' || 
       textStatus === 'notmodified') 
      { 
       modal.show(); 
      } 
    }); 
}); 

とHTML：

<div id="modal" class="modal fade" 
    tabindex="-1" role="dialog" aria-labelledby="plan-info" aria-hidden="true"> 
    <div class="modal-dialog modal-full-screen"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" 
        data-dismiss="modal" aria-hidden="true"> 
        <span class="glyphicon glyphicon-remove-circle"></span> 
       </button> 
      </div> 
      <div class="modal-body"> 
       <!-- /# content goes here --> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

あなたは.modal-bodyからすべての子ノードを削除するにはjQueryのemptyメソッドを使用することができるはずです。

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

Answer 2

1つの問題はありますあなたがすでにそれを閉じた後まで、あなたはその人のことを聞いていないということです。あなたは持っている：

// Hide the modal 
$('.modal').modal('hide'); 

// Start listening for the hide event, if the modal closes remove the data 
$('body').on('hidden.bs.modal', '.modal', function() { 
    $(this).removeData('bs.modal'); 
}); 

代わりに、いずれかの移動移動隠すリスナーを（それは一度だけ聞いて開始する必要があるので、おそらく機能外）、それはhideイベントの前に実行されるように、またはそれを削除し、単に仮定し$('.modal').removeData('bs.modal');

Answer 3

を持っていますあなたのモーダルは何も特別なことをしていません。Bootbox.jsのようなものを使う方が簡単かもしれませんが、それはあなたのブートストラップモーダルをオンザフライで生成します。あなたのコードは次のようになります：

$('a[rel=modal]').on('click', function(evt) { 
    evt.preventDefault(); 

    var url = $(this).attr('href'); 

    $.get(url) 
     .done(function (response, status, jqxhr) { 
      // store a reference to the bootbox object 
      var dialog = bootbox.dialog({ 
       message: response 
      }); 
     }) 
     .fail(function(jqxhr, status, error){ 
      /* Do something when the form can't be loaded */ 
     }); 
});