bootstrap模態框modal使用remote第二次加載顯示相同內容解決辦法

 

bootstrap模態框modal使用remote動態加載內容，第二次加載顯示相同內容解決辦法

bootstrap的modal中，使用remote可以動態加載頁面到modal-body中，並彈窗顯示

如果提供的是 URL，將利用 jQuery 的 load 方法從此 URL 地址加載要展示的內容（只加載一次）並插入 .modal-content 內。如果使用的是 data 屬性 API，還可以利用 href 屬性指定內容來源地址。下面是兩個實例：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

$("#myModal").modal({
remote: "/info?id="+id,
backdrop: 'static',
keyboard: false
});

但是這樣加載后，會有問題，modal數據只加載一次，如果要加載不同的數據，例如根據id查詢不同物品的詳細信息，modal的數據是不能更新的，即使傳的id值不同。其實解決辦法很簡單，只需要在加載下次數據前，將之前的加載的數據清除即可。

解決方法：監聽modal的hidden，當modal關閉時，即把數據清除即可。

代碼如下

$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
上面的代碼基於 Bootstrap v2，如果使用的是 Bootstrape v3

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

或者

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

或者

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

或者

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});