Recharger le contenu dans une modale (twitter bootstrap)

Question

J'utilise la popup modale de twitter bootstrap.

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

Je peux charger du contenu en utilisant ajax avec cet élément a :

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

Maintenant je dois ouvrir la même modale mais en utilisant une url différente. J'utilise cette modale pour modifier une entité de ma base de données. Ainsi, lorsque je clique sur modifier une entité, je dois charger la modale avec un ID.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

Si je clique sur le lien numéro 1, cela fonctionne bien. Mais si je clique ensuite sur le lien numéro 2, le contenu de la modale est déjà chargé et, par conséquent, le contenu du lien numéro 1 s'affiche.

Comment rafraîchir ou réinitialiser le contenu chargé par ajax dans une popup modale twitter bootstrap ?

Answer 1

J'ai le même problème, et je suppose que le moyen de le résoudre sera de supprimer l'attribut data-toggle et d'avoir un gestionnaire personnalisé pour les liens.

Quelque chose du genre :

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

Je vais l'essayer plus tard et poster des commentaires.

Answer 2

Pour décharger les données lorsque la modale est fermée, vous pouvez utiliser ceci avec Bootstrap 2.x :

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

Et dans Bootstrap 3 ( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ) :

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Answer 3

Vous pouvez forcer Modal à rafraîchir la popup en ajoutant cette ligne à la fin de la méthode hide du plugin Modal (Si vous utilisez bootstrap-transition.js v2.1.1, ce devrait être à la ligne 836)

this.$element.removeData()

Ou avec un écouteur d'événements

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

Answer 4

Avec Bootstrap 3, vous pouvez utiliser le gestionnaire d'événements "hidden.bs.modal" pour supprimer toutes les données liées à la modale, ce qui oblige le popup à se recharger la prochaine fois :

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

Answer 5

Sur la base des autres réponses (merci à tous).

J'ai dû ajuster le code pour qu'il fonctionne, car le simple fait d'appeler .html effaçait tout le contenu et la modale ne se chargeait pas avec du contenu après que je l'ai fait. J'ai donc simplement recherché la zone de contenu de la modale et appliqué la réinitialisation du HTML à cet endroit.

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

Je vais peut-être continuer avec la réponse acceptée, car j'obtiens un saut horrible juste avant le chargement de la modale, car le contrôle est avec Bootstrap.