Twitter bootstrap remote modal показывает один и тот же контент каждый раз

для Bootstrap 3, Вы должны использовать:

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

для Bootstrap 3.1 вы хотите удалить данные и очистить modal-content вместо всего диалога (3.0), чтобы избежать мерцания во время ожидания загрузки удаленного содержимого.

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

если вы используете не удаленные модалы, то приведенный выше код, конечно, удалит их содержимое после закрытия (плохо). Вам может потребоваться добавить что-то в эти модалы (например,.local-modal class), поэтому они не затронуты. Затем измените приведенный выше код на:

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

спасибо Мерв. Я начал мастерить вокруг boostrap.js, но ваш ответ-быстрый и чистый обходной путь. Вот что я использовал в своем коде.

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

принятый ответ не работа для меня, поэтому я пошел с JavaScript, чтобы сделать это.

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})

это работает с Bootstrap 3 FYI

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

мой проект построен в Yii и использует плагин Bootstrap-Yii, поэтому этот ответ актуален только в том случае, если вы используете Yii.

вышеуказанное исправление сработало, но только после первого показа модального. В первый раз он оказался пустым. Я думаю, это потому, что после моего инициирования кода Yii вызывает функцию hide модального, тем самым очищая мои переменные инициации.

Я обнаружил, что размещение вызова removeData непосредственно перед кодом, который запустил модал сделал трюк. Итак, мой код структурирован следующим образом...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

в Bootstrap 3.2.0 событие " on " должно быть в документе, и вы должны очистить модальное :

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

в Bootstrap 3.1.0 событие" on " может быть на теле:

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

почему бы не сделать его более общим с BS 3? Просто используйте" [что-то]модальное " в качестве идентификатора модального DIV.

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

только рабочий вариант для меня:

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

Я использую Bootstrap 3 и у меня есть функция, которая называется popup('popup content') который добавляет модальное поле html.

добавление $(this).html ( " ); для очистки видимых данных, а также, и он работает довольно хорошо

если предоставляется удаленный URL-адрес, содержимое будет загружено один раз через jQuery загрузить метод и впрыснутый в .модальное содержание div. Если вы используете data-api, вы можете также использовать атрибут href для указания удаленного источника. Пример этого показан ниже

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

Я добавил что-то вроде этого, потому что старый контент отображается до появления нового.html(") внутри .модальный контент очистит HTML внутри, надеюсь, это поможет

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

Я написал простой фрагмент, обрабатывающий обновление модального. В основном он хранит нажатую ссылку в данных модального и проверить, если это та же ссылка, которая была нажата, удаление или нет модальных данных.

var handleModal = function()
{
    $('.triggeringLink').click(function(event) {
        var $logsModal = $('#logsModal');
        var $triggeringLink = $logsModal.data('triggeringLink');

        event.preventDefault();

        if ($logsModal.data('modal') != undefined
            && $triggeringLink != undefined
            && !$triggeringLink.is($(this))
        ) {
            $logsModal.removeData('modal');
        }

        $logsModal.data('triggeringLink', $(this));

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};

для Bootstrap 3, в модальном.js я изменил:

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

to

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { 
    $(this).removeData('bs.modal').empty()
    $(document.body).removeClass('modal-open')
  })

(добавлено дополнительное расстояние для ясности)

это предотвращает нежелательную вспышку старого модального содержимого, вызывая empty () в модальном контейнере, а также удаляя данные.

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

это работает для меня.

этот другой подход хорошо работает для меня:

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

какой html-элемент вы хотите очистить как (div, span whatever).

это работает для меня:

модальные

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
  </div>
  <div class="modal-body">
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
    <div class="links-area" id="links-area"></div>
  </div>
  <div class="modal-footer">
  </div>
</div> </div></div>

скрипт

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

ссылки-область-это область, где я помещаю данные и должен очистить

Расширенная версия принятого ответа @merv. Он также проверяет, загружается ли модальное скрытие из удаленного источника и очищает старое содержимое, чтобы предотвратить его мигание.

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

протестировано на Bootstrap версии 3.3.2

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

удачи с этим:

$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});