93 votes

Recharger le contenu en modal (twitter bootstrap)

Je suis en utilisant twitter bootstrap modal popup.

<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 le contenu à l'aide d'ajax avec cet élément:

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

Maintenant, je dois ouvrir le même modale, mais en utilisant une url différente. Je suis à l'aide de ce modal pour modifier une entité à partir de ma base de données. Alors, quand je clique sur modifier sur une entité j'ai besoin de 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 ci-numéro 1, il fonctionne très bien. Mais si je puis cliquez sur le lien numéro 2 modale de contenu est déjà chargé et à cet effet, il affichera le contenu du lien numéro 1.

Comment puis-je actualiser ou réinitialiser l'ajax contenu chargé dans un twitter bootstrap modal popup?

95voto

markz Points 989
<p>J’ai le même problème, et je suppose que le moyen d’y parvenir sera de supprimer l’attribut de données bascule et avoir un gestionnaire personnalisé pour les liens.<p>Quelque chose dans les lignes de :</p><pre><code></code></pre><p>Va essayer plus tard et poster des commentaires.</p></p>

67voto

Steffen Wenzel Points 420
<p>Pour décharger les données quand la modale est fermée, vous pouvez l’utiliser avec Bootstrap 2.x :<pre><code></code></pre><p>Et 3 Bootstrap (<a href="https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516">https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516</a>) :</p><pre><code></code></pre></p>

21voto

Sergio Points 229
<p>Vous pouvez forcer Modal pour actualiser la fenêtre contextuelle en ajoutant cette ligne à la fin de la méthode hide du plugin modale (si vous utilisez v2.1.1 bootstrap-transition.js, il devrait être en ligne 836)<pre><code></code></pre><p>Ou avec un écouteur d’événements</p><pre><code></code></pre></p>

15voto

Art Points 5151
<p>Avec Bootstrap 3 vous pouvez utiliser le gestionnaire d’événements de « hidden.bs.modal » pour supprimer toutes les données liées à modal, forçant le popup pour recharger la prochaine fois :<pre><code></code></pre></p>

8voto

Modika Points 1112
<p>Issu des autres réponses (Merci à tous).<p>J’avais besoin d’ajuster le code fonctionne, comme .html appelant simplement effacé tout le contenu et le modal chargerait pas avec n’importe quel contenu après que je l’ai fait. Alors j’ai simplement cherché à la zone de contenu de la modale et demandé la remise à zéro du code HTML il.</p><pre><code></code></pre><p>Encore peut aller avec la réponse acceptée que je me fais un saut laid juste avant les charges modaux que le contrôle est bootstrap.</p></p>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: