web-dev-qa-db-fra.com

Recharger le contenu en mode 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 éditer une entité de ma base de données. Ainsi, lorsque je clique sur modifier sur une entité, je dois charger le modal 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 modal est déjà chargé et le contenu du lien numéro 1 sera affiché. 

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

javascripttwitter-bootstrap
94
stian.net

J'ai le même problème, et je suppose que la manière 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 essayer plus tard et poster des commentaires.

95
markz

Pour décharger les données lorsque le modal est fermé, 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');
});
68
Steffen Wenzel

Vous pouvez forcer Modal à actualiser la fenêtre en ajoutant cette ligne à la fin de la méthode de masquage du plug-in 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();
})
21
Sergio

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

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

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

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

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

Encore peut aller avec la réponse acceptée que je reçois des sauts laids juste avant les charges modales que le contrôle est avec Bootstrap.

8
Modika

Un peu plus compressé que l'exemple accepté ci-dessus. Récupère la cible à partir de la cible de données de l'élément en cours de clic avec Data-toggle = modal on. Ainsi, vous n'avez pas besoin de savoir quel est l'identifiant du modal cible, il vous suffit de réutiliser 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"); 
    });
});

Exemple 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>
5
geilt

J'ai apporté une petite modification à Softlion answer, afin que tous mes modaux ne soient pas actualisés à la dissimulation . 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 code HTML modal car les anciennes valeurs sont affichées jusqu'à ce que les nouvelles soient chargées, ce qui permet à HTML vide de corriger ce problème.

2
Shiva Avula

J'étais également coincé sur ce problème, puis j'ai vu que les ids du modal sont les mêmes. Vous avez besoin de différents ids des modaux si vous voulez plusieurs modaux. J'ai utilisé dynamique id . Voici mon code dans 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.

1
Asnad Atta

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>

1
Bijaya Kumar

Voici une version de coffeescript qui a fonctionné pour moi.

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

var $ table = $ ('# myTable2');
$ table.bootstrapTable ('destroy');

A travaillé pour moi

0
Ashwin Golani

Vous pouvez essayer ceci:

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

0
bharat

Je voulais que le contenu chargé AJAX soit supprimé à la fermeture du modal. J'ai donc ajusté la ligne suggérée par d'autres utilisateurs (syntaxe Coffeescript):

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