Modal remoto de arranque de Twitter muestra el mismo contenido cada vez

Estoy usando Twitter bootstrap, he especificado un modal

 

Y los enlaces

 Edit 1 Edit 2 Edit 2 

Cuando hago clic en cualquiera de estos enlaces por primera vez, veo el contenido correcto, pero cuando hago clic en otros enlaces muestra el mismo contenido cargado por primera vez, no actualiza el contenido.

Quiero que se actualice cada vez que se hace clic.

PD: Puedo hacer que funcione fácilmente a través de la función jQuery personalizada, pero quiero saber si es posible con la función remota modal Bootstrap nativa, ya que debería ser bastante fácil y supongo que solo estoy complicando las cosas.

El problema es doble.

En primer lugar , una vez que se crea una instancia de un objeto modal, se adjunta persistentemente al elemento especificado por data-target y llamadas posteriores para mostrar que modal solo llamará a toggle() , pero no actualizará los valores en las options . Entonces, aunque los atributos de href son diferentes en sus diferentes enlaces, cuando se alterna el modal, el valor de remote no se actualiza. Para la mayoría de las opciones, uno puede evitar esto editando directamente el objeto. Por ejemplo:

 $('#myModal').data('bs.modal').options.remote = "http://website.com/item/7"; 

Sin embargo, eso no funcionará en este caso, porque …

En segundo lugar , el complemento modal está diseñado para cargar el recurso remoto en el constructor del objeto modal, lo que desafortunadamente significa que incluso si se realiza un cambio en options.remote , nunca se volverá a cargar .

Un remedio simple es destruir el objeto modal antes de los cambios posteriores. Una opción es simplemente destruirlo después de que termine de ocultarse:

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

Nota: Ajuste los selectores según sea necesario. Este es el más general.

Plunker

O podría intentar crear un esquema más complicado para hacer algo como verificar si el enlace que lanza el modal es diferente al anterior. Si es así, destruye; si no es así, entonces no hay necesidad de volver a cargar.

Para bootstrap 3 debes usar:

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

Para Bootstrap 3.1, querrá eliminar datos y vaciar el modal-content lugar del cuadro de diálogo completo (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 modals no remotos, el código anterior, por supuesto, eliminará su contenido una vez cerrado (mal). Es posible que deba 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 retocar alrededor de boostrap.js pero tu 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'); }); 

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 complemento Bootstrap-Yii, por lo que esta respuesta solo es relevante si usas 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 es porque después de mi inicio del código, Yii llama a la función hide del modal, borrando así mis variables de iniciación.

Descubrí que poner la llamada a removeData inmediatamente antes de que el código que lanzó el modal hiciera el truco. Entonces mi código está estructurado así …

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

En Bootstrap 3.2.0, el evento “on” debe estar en el documento y debe 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 ID del modal DIV.

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

La única opción de trabajo 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 agrega el cuadro modal html.

Agregar un $ (this) .html (”); para borrar 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 de carga de jQuery y se inyectará en la div .modal-content. Si está utilizando la api de datos, alternativamente puede usar el atributo href para especificar la fuente remota. 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 contenido .modal borrará el HTML dentro, espero que ayude

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

Escribí un fragmento simple manejando la actualización del modal. Básicamente almacena el enlace cliqueado en los datos del modal y verifica si es el mismo enlace en el que se ha hecho clic, 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 cambié:

 $(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 del contenido modal antiguo llamando a empty () en el contenedor modal y eliminando los datos.

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

Esta 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 quieres vaciar como (div, span lo que sea)?

Esta funciona para mí:

modal

  

guión

  

links-area es el área donde pongo los datos y necesito borrar

Versión expandida de la respuesta aceptada por @merv. También comprueba si el modal que se oculta está cargado desde un origen remoto y borra el contenido anterior para evitar que destelle.

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