jquery - modal - popovers bootstrap 4

Twitter bootstrap remoto modal muestra el mismo contenido cada vez

Question

Estoy usando Twitter bootstrap, he especificado un modal

<div class="modal hide" id="modal-item">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Update Item</h3>
</div>
<form action="http://www.website.com/update" method="POST" class="form-horizontal">
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Update Item</button>
</div>
</form>
</div>

Y los enlaces

<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

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 haga 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 creo que solo estoy complicando las cosas.

Answer 1

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

Answer 2

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

Answer 3

Buena suerte con este:

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

Answer 4

El problema es doble.

Primero , una vez que se crea una instancia de un objeto modal, se adjunta persistentemente al elemento especificado por data-target y las llamadas subsiguientes para mostrar que el modal solo llamará toggle() en él, pero no actualizará los valores en las options . Entonces, a pesar de que los atributos href son diferentes en sus diferentes enlaces, cuando se cambia el modo, el valor para el remote no se actualiza. Para la mayoría de las opciones, se 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 ...

Segundo , 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 las options.remote , nunca se volverá a cargar .

Un remedio simple es destruir el objeto modal antes de los cambios subsiguientes. 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 puede 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 lo es, entonces no hay necesidad de recargar.

Answer 5

En Bootstrap 3.2.0, el evento "on" debe estar en el documento y usted 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'');
});

Answer 6

Escribí un simple fragmento de código manejando la actualización del modal. Básicamente, almacena el enlace en el que se hizo clic en los datos modales y verifica si se ha hecho clic en el mismo enlace, 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'');
});
};

Answer 7

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

guión

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

Área de enlaces es el área donde coloco los datos y necesito borrar

Answer 8

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

Answer 9

Esto funciona con Bootstrap 3 FYI

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

Answer 10

Gracias merv. Comencé a juguetear con 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'');
});

Answer 11

He agregado algo como esto, porque el contenido más antiguo 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('''');
});

Answer 12

La única opción de trabajo para mí es:

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

Utilizo Bootstrap 3 y tengo una función llamada popup(''popup content'') que agrega el cuadro modal html.

Answer 13

La respuesta aceptada no me funcionó, así que elegí 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")})
})
})

Answer 14

Mi proyecto está construido en Yii y usa el complemento Bootstrap-Yii, por lo que esta respuesta solo es relevante si estás usando Yii.

La solución anterior funcionó, pero solo después de la primera vez que se mostró el modal. La primera vez salió vacío. Creo que eso se debe a que, después de iniciar el código, Yii llama a la función de ocultar del modal, borrando 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''});

Answer 15

Para Bootstrap 3, en modal.js he cambiado:

$(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 al llamar a empty () en el contenedor modal, así como a la eliminación de los datos.

Answer 16

Para Bootstrap 3.1, querrá eliminar los datos y vaciar el modal-content lugar de todo el diálogo (3.0) para evitar el parpadeo mientras se 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 (incorrecto). 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 para:

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

Answer 17

Para bootstrap 3 debes usar:

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

Answer 18

Probado en la versión 3.3.2 de Bootstrap

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

Answer 19

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 el div .modal-content. Si está utilizando la api de datos, también 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
});

Answer 20

Versión ampliada de respuesta aceptada por @merv. También verifica si el modal que se oculta está cargado desde una fuente remota y borra el contenido antiguo 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

Answer 21

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

Esta funciona para mí.

Answer 22

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

Qué elemento html desea vaciar como (div, abarque lo que sea).