javascript - close - modal bootstrap ejemplos

Bootstrap evento modal ''cargado'' en fragmento remoto

Question

Actualmente estoy usando el componente modal de Twitter Bootstrap y tengo un problema en el que uso el complemento de validación jquery en los campos de entrada en el contenido que cargo de forma remota utilizando el atributo de datos remotos.

Debido a que el contenido se carga después de que la validación de jquery se haya ejecutado en el dom, la validación no se produce para los elementos recién cargados.

Tengo una solución donde modifico bootstrap.js (la clase modal), ver más abajo.

  var Modal = function (element, options) {
    this.options = options
    this.$element = $(element)
      .delegate(''[data-dismiss="modal"]'', ''click.dismiss.modal'', $.proxy(this.hide, this))
    //this.options.remote && this.$element.find(''.modal-body'').load(this.options.remote)

    this.options.remote && this.$element.find(''.modal-body'').load(this.options.remote, $.proxy(function () {
        this.$element.trigger(''loaded'')
    }, this)) //my additions
  }

Disparo un evento ''cargado'' a la llamada que carga el fragmento HTML externo.

Ya tengo este evento conectado y llamo a la validación de los elementos recién cargados.

$(''#myModal'').on(''loaded'', function () {
                $.validator.unobtrusive.parse($(this));
            });

Mi problema es que tuve que modificar bootstrap.js para lograr esto, ¿hay alguna manera de que esto funcione externamente sin modificar bootstrap.js? ¿Hay alguna forma de acceder al objeto modal en una página y adjuntarle el evento ''cargado''? Me gustaría hacer esto en un script externo o dentro de una página para no tener que preocuparme por las versiones de bootstrap.

Answer 1

El evento ''loaded.bs.modal'' no me funciona, así que probé el evento ''shown.bs.modal'' y funciona bien:

$(''#myModal'').on(''shown.bs.modal'', function () {
   // do cool stuff here...
});

Este evento se captura después de que se muestra el modal.

Espero que esto ayude a alguien :)

Answer 2

Sólo una actualización aquí:

Bootstrap ha añadido un evento cargado.

getbootstrap.com/javascript/#modals

capturar el evento ''loaded.bs.modal'' en el modal

$(''#myModal'').on(''loaded.bs.modal'', function (e) {
  // do cool stuff here all day… no need to change bootstrap
})

Answer 3

Según estos dos temas:

https://github.com/twbs/bootstrap/issues/5169

https://github.com/twbs/bootstrap/pull/6846

... como ahora, los desarrolladores de Bootstrap se están metiendo en sus talones y se niegan a agregar un evento loaded en Bootstrap.

Así que, en lugar de eso, recomiendan que evites usar el marcado de data-remote y que cargues los datos en el modal:

$(''#myModal'').modal(your_options).find(''.modal-body'').load(''request_url'', function () {
  // do cool stuff here all day… no need to change bootstrap
}'')

Answer 4

Tuve una captura bastante interesante. En mi caso, en localhost, el evento loaded.bs.modal se disparó antes del evento shown.bs.modal ya que en el host local el acto de buscar los datos de la URL " remote " ( que era local por cierto ), estaba sucediendo instantáneamente incluso antes de que la rutina de carga pudiera finalizar su transición y desencadenar el evento de shown.bs.modal .

Pero en un servidor web los eventos se activaban en el orden percibido .

Primero se shown.bs.modal el shown.bs.modal y luego, debido a la latencia pragmática de la URL remota, se loaded.bs.modal el evento loaded.bs.modal .

Lo que quería era agarrar un evento lo que sucediera el último.

Así que para resolverlo se me ocurrió mi propia implementación como se muestra a continuación. YMMV, ahora hay muchas suposiciones aquí, así que tome el siguiente código como un POC y con un grano de sal en lugar de un código completo.

jQuery(''#myModal'').on(''shown.bs.modal'', function () {
    if (jQuery(this).find(''.resetFlag'').length) {
        // Do something ONLY IF "loaded.bs.modal" hasn''t yet been triggered
    }
});
jQuery(''#myModal'').on(''loaded.bs.modal'', function (e) {

    if (jQuery(this).find(''.resetFlag'').length) {
        // Do something ONLY IF "shown.bs.modal" hasn''t yet been triggered
        } else  {
        // Do something ONLY IF "shown.bs.modal" hasn already been triggered
        }
});
jQuery(''#myModal'').on(''hidden.bs.modal'', function () {
    jQuery(''#myModal .modal-content'').html(''<div class="resetFlag" style="display:none;"></div>'');
    showModalLoader();
});