Recharger le contenu en modal (bootstrap Twitter)

J'utilise le popup modal 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 le même modal mais en utilisant une URL différente. J'utilise ce modal pour modifier une entité de ma base de données. Ainsi, lorsque je clique sur modifier sur une entité, je dois charger le modal avec un identifiant.

<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 modal est déjà chargé et il affichera donc le contenu du lien numéro 1.

Comment puis-je actualiser ou réinitialiser le contenu chargé ajax dans une fenêtre contextuelle modale d'amorçage Twitter?

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

Quelque chose dans les lignes de:

$("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 publier des commentaires.

Pour décharger les données lorsque le modal est fermé, vous pouvez l'utiliser 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');
});

Vous pouvez forcer Modal à actualiser 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, cela devrait être à la ligne 836)

this.$element.removeData()

Ou avec un auditeur d'événement

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

Avec Bootstrap 3, vous pouvez utiliser le gestionnaire d'événements 'hidden.bs.modal' pour supprimer toutes les données liées au modal, forçant la fenêtre contextuelle à se recharger la prochaine fois:

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

Basé sur d'autres réponses (merci à tous).

J'avais besoin d'ajuster le code pour qu'il fonctionne, car le simple fait d'appeler .html effaçait tout le contenu et le modal ne se chargerait d'aucun contenu après l'avoir fait. J'ai donc simplement cherché la zone de contenu du modal et y ai appliqué la réinitialisation du HTML.

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

Peut-être encore aller avec la réponse acceptée car je reçois un saut laid juste avant les charges modales car le contrôle est avec Bootstrap.

Un peu plus compressé que l'exemple accepté ci-dessus. Attrape la cible de la cible de données de l'actuel cliqué sur n'importe quoi avec data-toggle = modal activé. Ainsi, vous n'avez pas besoin de savoir quel est l'identifiant du modal cible, réutilisez simplement le même! moins de code = gagner! Vous pouvez également le modifier pour charger le titre, les étiquettes et les boutons de votre modal si vous le souhaitez.

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

Exemples de liens:

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

J'ai apporté une petite modification à la réponse Softlion , donc tous mes modaux ne s'actualiseront pas. Les modaux avec l'attribut data-refresh = 'true' sont uniquement actualisés, les autres fonctionnent comme d'habitude. Voici la version modifiée.

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

Maintenant, utilisez l'attribut comme indiqué ci-dessous,

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

Cela garantira que seuls les modaux avec data-refresh = 'true' sont actualisés. Et je réinitialise également le html modal parce que les anciennes valeurs sont affichées jusqu'à ce que de nouvelles soient chargées, ce qui rend le html vide corrige celui-là.

Voici une version coffeescript qui a fonctionné pour moi.

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

Cela fonctionnera pour toutes les versions de twitterbootstrap

Code Javascript:

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

les liens vers modal sont

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

pop up modal

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

J'étais aussi coincé sur ce problème puis j'ai vu que les identifiants du modal sont les mêmes. Vous avez besoin de différents identifiants de modaux si vous voulez plusieurs modaux. J'ai utilisé un identifiant dynamique . Voici mon code en haml:

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

tu peux le faire

<div id="<%= some.id %>" 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>

et vos liens vers modal seront

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

J'espère que cela fonctionnera pour vous.

Vous pouvez essayer ceci:

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

Je voulais que le contenu chargé AJAX soit supprimé lors de la fermeture du modal, j'ai donc ajusté la ligne suggérée par d'autres (syntaxe coffeescript):

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

var $ table = $ ('# maTable2');
$ table.bootstrapTable ('détruire');

A travaillé pour moi

étape 1: créer un wrapper pour le modal appelé clone-modal-wrapper .

étape 2: Créez un div vide appelé modal-wrapper.

Étape 3: Copiez l'élément modal de clone-modal-wrappervers modal-wrapper.

Étape 4: Basculez le modal de modal-wrapper.

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <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>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});