Twitter bootstrap remote modal muestra el mismo contenido cada vez

Para bootstrap 3 debes usar:

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

Para Bootstrap 3.1, querrá eliminar los datos y vaciar el modal-content en lugar de todo el diálogo (3.0) para evitar el parpadeo mientras espera que se cargue el contenido remoto.

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

Si está utilizando modales no remotos, el código anterior, por supuesto, eliminará su contenido una vez cerrado (malo). Es posible que necesite agregar algo a esos modales (como una clase .local-modal) para que no se vean afectados. Luego modifique el código anterior a:

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

Gracias merv. Empecé a juguetear con Boostrap.js pero su respuesta es una solución rápida y limpia. Esto es lo que terminé usando en mi código.

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

La respuesta aceptada no funcionó para mí, así que fui con JavaScript para hacerlo.

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

Esto funciona con Bootstrap 3 FYI

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

Mi proyecto está construido en Yii y usa el plugin Bootstrap-Yii, así que esta respuesta solo es relevante si estás usando Yii.

La corrección anterior funcionó, pero solo después de la primera vez que se mostró el modal. La primera vez que salió vacío. Creo que eso es porque después de mi iniciación del código Yii llama a la función hide del modal limpiando así mis variables de iniciación.

Encontré que poner la llamada removeData inmediatamente antes del código que lanzó el modal hizo el truco. Así que mi código está estructurado así...

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

En Bootstrap 3.2.0 el evento " on " tiene que estar en el documento y tienes que vaciar el modal :

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

En Bootstrap 3.1.0 el evento" on " puede estar en el cuerpo:

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

¿Por qué no hacerlo más general con BS 3? Simplemente use "[algo]modal " como el ID del DIV modal.

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

La única opción que funciona para mí es:

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

Uso Bootstrap 3 y tengo una función llamada popup('popup content') que añade el cuadro modal html.

Añadiendo un $(this).html ( " ); para borrar los datos visibles también, y funciona bastante bien

Si se proporciona una URL remota, el contenido se cargará una vez a través del método load de jQuery y se inyectará en el .modal-div contenido. Si está utilizando data-api, puede utilizar alternativamente el atributo href para especificar el origen remoto. Un ejemplo de esto se muestra a continuación

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

He agregado algo como esto, porque el contenido anterior se muestra hasta que aparece el nuevo, con.html(") dentro del .modal-content borrará el HTML dentro, espero que ayude

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

Escribí un simple fragmento manejando la actualización del modal. Básicamente almacena el enlace pulsado en los datos del modal y comprueba si es el mismo enlace en el que se ha pulsado, eliminando o no los datos modales.

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

Para Bootstrap 3, en modal.js I changed:

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

A

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

(espacio adicional añadido para mayor claridad)

Esto evita cualquier flash no deseado de contenido modal antiguo llamando a empty() en el contenedor modal, así como eliminando los datos.

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

Este funciona para mí.

Este otro enfoque funciona bien para mí:

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

Qué elemento html desea vaciar como(div,span whatever).

Este funciona para mí:

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>

Script

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

Enlaces-área es el área donde pongo los datos y la necesidad de borrar

Versión expandida de respuesta aceptada por @merv. También comprueba si el modo oculto se carga desde la fuente remota y borra el contenido antiguo para evitar que parpadee.

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

Probado en Bootstrap versión 3.3.2

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

Buena suerte con este:

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