Twitter Bootstrap remote modal pokazuje tę samą zawartość za każdym razem

Do bootstrap 3 należy użyć:

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

W przypadku Bootstrap 3.1 należy usunąć dane i opróżnić modal-content zamiast całego okna dialogowego (3.0), aby uniknąć migotania podczas oczekiwania na załadowanie zdalnej zawartości.

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

Jeśli używasz nie-zdalnych modali, powyższy kod oczywiście usunie ich zawartość po zamknięciu (zły). Być może będziesz musiał dodać coś do tych modali (jak klasa .local-modal), aby nie zostały naruszone. Następnie zmodyfikuj powyższy kod na:

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

Dzięki merv. Zacząłem majstrować wokół boostrap.js ale twoja odpowiedź to szybkie i czyste obejście. Oto, czego użyłem w kodzie.

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

Zaakceptowana odpowiedź nie działa dla mnie, więc poszedłem z JavaScript, aby to zrobić.

<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")})
    })
})

To działa z Bootstrap 3 FYI

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

Mój projekt jest zbudowany w Yii i używa wtyczki Bootstrap-Yii, więc ta odpowiedź jest istotna tylko wtedy, gdy używasz Yii.

Powyższa poprawka zadziałała, ale dopiero po pierwszym pokazaniu modalu. Za pierwszym razem było puste. Myślę, że dzieje się tak dlatego, że po zainicjowaniu kodu Yii wywołuje funkcję hide modal, usuwając w ten sposób moje zmienne inicjacyjne.

Odkryłem, że umieszczenie wywołania removeData bezpośrednio przed kodem, który uruchomił modal, spowodowało trick. Więc mój kod jest tak skonstruowany...

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

W Bootstrap 3.2.0 Zdarzenie "on" musi znajdować się w dokumencie i musisz opróżnić modal:

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

W Bootstrap 3.1.0 Zdarzenie "on" może być na ciele:

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

Dlaczego nie uczynić go bardziej ogólnym z BS 3? Po prostu użyj "[coś] modal " jako ID modalnego DIV.

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

Jedyną działającą opcją dla mnie jest:

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

Używam Bootstrap 3 i mam funkcję o nazwie popup('popup content') który dołącza pole modalne html.

Dodanie $(this).html ("); aby wyczyścić widoczne dane, a to działa całkiem dobrze

Jeśli podany jest Zdalny adres URL, zawartość zostanie załadowana jednorazowo za pomocą metody jQuery load i wstrzyknięta do .modal-content div. Jeśli używasz API danych, możesz alternatywnie użyć atrybutu href, aby określić zdalne źródło. Przykład tego pokazano poniżej

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

Dodałem coś takiego, ponieważ starsza treść jest wyświetlana, dopóki nie pojawi się nowa, z .html ( " ) wewnątrz .modal-content wyczyści HTML wewnątrz, mam nadzieję, że pomoże

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

Napisałem prosty fragment obsługujący odświeżanie modalu. Zasadniczo przechowuje kliknięty link w danych modalnych i sprawdź, czy jest to ten sam link, który został kliknięty, usuwając lub nie dane modalne.

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');
    });
};

Dla Bootstrap 3, w trybie modalnym.js zmieniłem:

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

Do

$(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')
  })

(dodatkowy odstęp dodany dla jasności)

Zapobiega to niechcianemu Flashowi starej zawartości modalnej poprzez wywołanie empty() w kontenerze modalnym, a także usunięcie danych.

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

To drugie podejście działa dobrze dla mnie:

$("#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()
});

Jaki element html chcesz opróżnić (div, span whatever).

Ten działa dla mnie:

Modal

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

Skrypt

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

Links-area to obszar, w którym umieszczam Dane i muszę wyczyścić

Rozszerzona wersja zaakceptowanej odpowiedzi przez @ merv. Sprawdza również, czy ukryty modal jest ładowany ze zdalnego źródła i czyści starą zawartość, aby zapobiec miganiu.

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

Testowane na wersji Bootstrap 3.3.2

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

Powodzenia z tym:

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