La modale distante de Twitter bootstrap affiche le même contenu à chaque fois

Question

J'utilise Twitter bootstrap et j'ai spécifié une modale.

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

Et les liens

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

Lorsque je clique sur l'un de ces liens pour la première fois, je vois le contenu correct, mais lorsque je clique sur d'autres liens, le même contenu est chargé pour la première fois et n'est pas mis à jour.

Je veux qu'il soit mis à jour à chaque fois que l'on clique dessus, j'ai beaucoup cherché sur Google mais je n'ai pas trouvé de solution.

P.S. : Je peux facilement le faire fonctionner via une fonction jQuery personnalisée, mais je veux savoir si c'est possible avec la fonction native Bootstrap modal remote, car cela devrait être assez facile Et je suppose que je ne fais que compliquer les choses....

Answer 1

Le problème est double.

Premier En effet, dès qu'un objet Modal est instancié, il est attaché de manière persistante à l'élément spécifié par l'option data-target et les appels suivants pour montrer que modal n'appellera que toggle() sur celui-ci, mais ne mettra pas à jour les valeurs dans le fichier options . Ainsi, même si le href sont différents sur vos différents liens, lorsque la modale est activée, la valeur de l'attribut remote n'est pas mis à jour. Pour la plupart des options, on peut contourner ce problème en modifiant directement l'objet. Par exemple :

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

Cependant, cela ne fonctionnera pas dans ce cas, car...

Deuxièmement le plugin Modal est conçu pour charger la ressource distante. dans le constructeur de l'objet Modal, ce qui signifie malheureusement que même si une modification est apportée à l'objet options.remote , il ne sera jamais rechargé .

Un remède simple consiste à détruire l'objet Modal avant les basculements suivants. Une autre option consiste à le détruire une fois qu'il a fini de se cacher :

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

_{<strong>Note : </strong>Ajustez les sélecteurs si nécessaire. C'est le plus général.}

Plunker

Vous pouvez aussi essayer de trouver un système plus compliqué pour vérifier si le lien qui lance la modale est différent du lien précédent. S'il l'est, il faut le détruire ; s'il ne l'est pas, il n'est pas nécessaire de le recharger.

Answer 2

Pour bootstrap 3, vous devez utiliser :

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

Answer 3

Pour Bootstrap 3.1, vous voudrez supprimer les données et vider le "modal-content" plutôt que la boîte de dialogue entière (3.0) pour éviter le scintillement en attendant le chargement du contenu distant.

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

Si vous utilisez des modales non distantes, le code ci-dessus supprimera, bien entendu, leur contenu une fois qu'elles seront fermées (mauvais). Vous devrez peut-être ajouter quelque chose à ces modales (comme une classe ".local-modal") pour qu'elles ne soient pas affectées. Ensuite, modifiez le code ci-dessus pour :

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

Answer 4

Merci Merv. J'ai commencé à bricoler autour de boostrap.js mais votre réponse est une solution rapide et propre. Voici ce que j'ai fini par utiliser dans mon code.

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

Answer 5

La réponse acceptée ne fonctionnait pas pour moi, alors j'ai choisi JavaScript pour le faire.

<a href="http://stackoverflow.com/foo" class="modal-link">
<a href="http://stackoverflow.com/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})