Bootstrap modal "chargé" de l'événement sur la télécommande fragment

Je suis actuellement en utilisant Twitter Bootstrap modal composant et j'ai un problème lorsque j'utilise jquery plugin de validation sur des champs de saisie dans le contenu, je charge à distance à l'aide de données à distance attribut.

Parce que le contenu est chargé après jquery de validation a courir à travers les dom, la validation ne se produit pas pour le nouvellement chargée éléments.

J'ai une solution où j'ai modifier bootstrap.js (la classe modale), voir ci-dessous.

  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
  }

- Je déclencher un "chargé" de l'événement à l'appel que les charges externes fragment html.

J'ai déjà cet événement branché et j'appelle la validation sur le nouveau chargé éléments.

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

Mon problème est que j'ai dû modifier bootstrap.js pour atteindre cet objectif, est-il possible que je puisse avoir ce travail externe sans modification bootstrap.js? Est-il un moyen d'accéder à la modale de l'objet sur une page et la joindre à la "chargé" de l'événement? j'aimerais le faire dans un script externe ou à l'intérieur d'une page, donc je n'ai pas besoin de vous soucier de bootstrap versions.

Est-il un problème avec la validation dans le shown cas de l'modal?
Pour le contenu distant, la montre se déclenche avant les nouveaux éléments sont chargés.

OriginalL'auteur scartag | 2013-09-23

17

Conformément à ces deux questions:

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

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

..aujourd'hui le Bootstrap développeurs sont à creuser leurs talons et refusant d'ajouter un loaded événement dans Bootstrap.

Donc, au lieu de cela, ils vous recommandons d'éviter d'utiliser la data-remote de balisage et de charger les données vous-même dans le modal:
```
$('#myModal').modal(your_options).find('.modal-body').load('request_url', function () {
  //do cool stuff here all day… no need to change bootstrap
}')
```
Vous êtes grand! Merci pour cette solution! Cela m'a aidé à résoudre ce problème: stackoverflow.com/questions/20339958/...
Juste une petite remarque donc aux gens de ne pas aller juste avec de la accepté de répondre sans vérifier. Bootstrap a eu un " chargé.bs.modale de l'événement pour un certain temps maintenant - getbootstrap.com/javascript/#modals.

OriginalL'auteur mccannf
33

Juste une mise à jour ici:

Bootstrap a ajouté un événement chargé.

http://getbootstrap.com/javascript/#modals

capturer le " chargé.bs.modale de l'événement sur le modal
```
$('#myModal').on('loaded.bs.modal', function (e) {
  //do cool stuff here all day… no need to change bootstrap
})
```
Merci vous m'empêchait d'avoir pas plus de cheveux sur ma tête!
Veuillez supprimer le ' partir de la dernière ligne. Il convient })}')
Cette réunion de travail seulement lorsque le contenu de l'modal est chargé avec télécommande option, si le contenu est embeded dans le code html modal fonctionne pas
Une idée de quand cela a été ajouté? Il ne fonctionne pas pour moi
Ce travail, lorsque nous en avons besoin pour appeler une fonction, après le chargement de script dans le bootstrap distance modale . Je vous remercie.

OriginalL'auteur George
13

Le " chargé.bs.modal' événement ne fonctionne pas pour moi, j'ai donc tenté le " montré.bs.modale de l'événement et ça fonctionne très bien :
```
$('#myModal').on('shown.bs.modal', function () {
   //do cool stuff here...
});
```
Cet événement est capturé après le modal est montré.

J'espère que cela va aider quelqu'un 🙂

les auxiliaires modaux montre d'abord, puis charge le contenu à distance, de sorte qu'il ne fonctionne pas
Ce n'est pas pertinent pour la question. La question implique ajax chargé du contenu que de la preuve n'est jamais déclenchée tant que produit d'une réponse ajax.
A fonctionné pour moi aussi. Mon modal-body est chargé avec l'ajax, puis affichée. Peut-être pas pertinente pour la question, mais utile pour certains d'entre nous 🙂

OriginalL'auteur Mohammed Réda OUASSINI
0

J'ai eu une assez intéressant attraper, Dans mon cas, sur localhost, l'événement loaded.bs.modal était de tir avant l'événement shown.bs.modal depuis sur l'hôte local la loi de récupérer les données à partir de la "remote" url(qui était local btw), qui se passait instanteneously avant même le démarrage pu terminer son processus de transition et de déclencher la shown.bs.modal événement.

Mais sur un serveur web, les événements ont tiré dans la perçu ordre.

D'abord le shown.bs.modal a été déclenchée et ensuite en raison de la pragmatique de la latence de l'url distante, l'événement loaded.bs.modal a été déclenché.

Ce que je voulais, c'est de prendre un événement selon ce qui s'est passé la dernière.

Afin de le résoudre, je suis venu avec ma propre mise en œuvre, comme ci-dessous. YMMV, Maintenant il ya beaucoup de suppositions, afin de prendre le code ci-dessous comme juste un POC et avec un grain de sel plutôt que d'un véritable code.
```
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();
});
```
OriginalL'auteur Mohd Abdul Mujib

Vous devez vous connecter pour publier un commentaire.