Twitter bootstrap remote modal affiche le même contenu à chaque fois

J'utilise Twitter bootstrap, j'ai spécifié 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>

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, il affiche le même contenu chargé pour la première fois, il ne met pas à jour le contenu.

Je veux qu'il soit mis à jour à chaque fois que vous cliquez dessus.

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

Le problème est double.

Tout d'abord , une fois qu'un objet Modal est instancié, il est attaché de manière persistante à l'élément spécifié par data-targetles appels suivants pour montrer que le modal ne fera appel toggle()qu'à lui, mais ne mettra pas à jour les valeurs dans le options. Ainsi, même si les hrefattributs sont différents sur vos différents liens, lorsque le modal est basculé, la valeur de remoten'est pas mise à jour. Pour la plupart des options, on peut contourner cela 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 à la options.remote, elle ne sera jamais rechargée .

Un remède simple consiste à détruire l'objet Modal avant de basculer ultérieurement. Une option consiste à simplement le détruire une fois qu'il se cache:

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

_{Remarque: ajustez les sélecteurs selon vos besoins. C'est le plus général.}

Plunker

Ou vous pouvez essayer de trouver un schéma plus compliqué pour faire quelque chose comme vérifier si le lien qui lance le modal est différent du précédent. Si c'est le cas, détruisez; sinon, pas besoin de recharger.

Pour bootstrap 3, vous devez utiliser:

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

Pour Bootstrap 3.1, vous souhaiterez supprimer des données et vider la modal-contentplutô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 modaux non distants, le code ci-dessus supprimera bien sûr leur contenu une fois fermé (mauvais). Vous devrez peut-être ajouter quelque chose à ces modaux (comme une .local-modalclasse) afin qu'ils ne soient pas affectés. Modifiez ensuite 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();
});

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

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

La réponse acceptée n'a pas fonctionné pour moi, alors je suis allé avec JavaScript pour le faire.

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

Cela fonctionne avec Bootstrap 3 FYI

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

Mon projet est construit en Yii et utilise le plugin Bootstrap-Yii, donc cette réponse n'est pertinente que si vous utilisez Yii.

Le correctif ci-dessus a fonctionné mais seulement après la première fois que le modal a été affiché. La première fois, il est venu vide. Je pense que c'est parce qu'après mon initiation du code, Yii appelle la fonction de masquage du modal, effaçant ainsi mes variables d'initiation.

J'ai trouvé que placer l'appel removeData juste avant le code qui a lancé le modal a fait l'affaire. Donc mon code est structuré comme ça ...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

Dans Bootstrap 3.2.0, l'événement "on" doit être sur le document et vous devez vider le modal:

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

Dans Bootstrap 3.1.0, l'événement "on" peut être sur le corps:

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

Pourquoi ne pas le rendre plus général avec BS 3? Utilisez simplement "[quelque chose] modal" comme ID du DIV modal.

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

La seule option de travail pour moi est:

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

J'utilise Bootstrap 3 et j'ai une fonction appelée popup('popup content') qui ajoute la boîte modale html.

Ajout d'un $ (this) .html (''); pour effacer également les données visibles, et cela fonctionne très bien

Si une URL distante est fournie, le contenu sera chargé une fois via la méthode de chargement de jQuery et injecté dans la div .modal-content. Si vous utilisez l'api de données, vous pouvez également utiliser l'attribut href pour spécifier la source distante. Un exemple de ceci est illustré ci-dessous

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

J'ai ajouté quelque chose comme ça, car l'ancien contenu est affiché jusqu'à ce que le nouveau apparaisse, avec .html ('') à l'intérieur du contenu .modal effacera le HTML à l'intérieur, j'espère que cela aide

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

J'ai écrit un simple extrait traitant de l'actualisation du modal. Fondamentalement, il stocke le lien cliqué dans les données du modal et vérifie s'il s'agit du même lien cliqué, supprimant ou non les données 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');
    });
};

Pour Bootstrap 3, dans modal.js j'ai changé:

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

à

$(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')
  })

(espacement supplémentaire ajouté pour plus de clarté)

Cela empêche tout flash indésirable de l'ancien contenu modal en appelant empty () sur le conteneur modal ainsi qu'en supprimant les données.

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

Celui-ci fonctionne pour moi.

Cette autre approche fonctionne bien pour moi:

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

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

Quel élément html que vous souhaitez vider (div, span, etc.).

Celui-ci fonctionne pour moi:

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>

scénario

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

liens-zone est la zone où je mets les données et besoin d'effacer

Version étendue de la réponse acceptée par @merv. Il vérifie également si le modal caché est chargé à partir d'une source distante et efface l'ancien contenu pour l'empêcher de clignoter.

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

Testé sur Bootstrap version 3.3.2

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

Bonne chance avec celui-ci:

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