Résoudre le problème du chargement des données distantes par Bootstrap une seule fois-Tutoriel H5-php.cn

Résoudre le problème du chargement des données distantes par Bootstrap une seule fois

巴扎黑

Libérer： 2017-07-24 11:06:37

original

1670 Les gens l'ont consulté

Résumé : Pour la boîte de dialogue modale du framework frontal Bootstrap, vous pouvez utiliser l'option distante pour spécifier une URL, afin que la boîte de dialogue charge automatiquement les données de cette adresse dans .modal-body lorsqu'elle apparaît. pour la première fois, mais il ne sera chargé qu'une seule fois, mais ce problème peut être résolu en appelant la méthode removeData() dans l'événement.

1. Boîte de dialogue modale Bootstrap et utilisation simple

 1 <div id="myModal" class="modal hide fade"> 2     <div class="modal-header"> 3         <button type="button" class="close" data-dismiss="modal">x</button> 4         <h3>对话框标题</h3> 5     </div> 6     <div class="modal-body"> 7         <p>对话框主体</p> 8     </div> 9     <div class="modal-footer">10         <a href="#" class="btn" data-dismiss="modal">取消</a>11         <a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>12     </div>13 </div>

Copier après la connexion

L'effet d'affichage est similaire à l'image ci-dessous :

Les boîtes de dialogue modales peuvent être appelées directement à l'aide de boutons ou de liens. C'est un usage simple :

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button><a href="#myModal" role="button" class="btn" data-toggle="modal">打开对话框</button>

Copier après la connexion

 <br/>

Copier après la connexion

Cela ne peut afficher que du contenu statique dans la boîte de dialogue. Utilisez l'option distante de la boîte de dialogue pour obtenir des effets plus puissants.

2. Utilisez l'option distante pour laisser la boîte de dialogue modale charger la page dans .modal-body

Il existe deux méthodes, l'une consiste à utiliser un lien, l'autre consiste à utiliser un script. .

2.1 Utilisation de liens

<a href="page.jsp" data-toggle="modal" data-target="#myModal">打开对话框</a>

Copier après la connexion

Lorsque vous cliquez sur ce lien, le contenu de page.jsp sera chargé dans le .modal de la boîte de dialogue -body, une boîte de dialogue apparaît.

2.2 Utiliser un script

$("#myModal").modal({
    remote: "page.jsp"
});

Copier après la connexion

L'effet de ce script est le même que l'utilisation d'un lien Lorsque ce script est exécuté, la page Le contenu du .jsp sera chargé dans le .modal-body de la boîte de dialogue et la boîte de dialogue sera affichée.

Derrière ces deux méthodes, Bootstrap appelle la méthode load() de jQuery pour charger la page page.jsp depuis le serveur. Mais ce chargement n'aura lieu qu'une seule fois. Peu importe le nombre de fois que vous cliquerez sur le lien, ou exécuterez le script plusieurs fois, ou même modifierez la valeur passée à l'option distante, la boîte de dialogue ne rechargera pas la page. C'est vraiment un casse-tête. . Mais le problème peut encore être résolu.

3. Supprimez les données pour que la boîte de dialogue puisse recharger la page à chaque ouverture

Après avoir recherché et consulté les documents pertinents, j'ai constaté qu'écrire un message dans l'événement caché du boîte de dialogue La déclaration suffit :

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

Copier après la connexion

Vous pouvez également supprimer les données avant d'ouvrir la boîte de dialogue à chaque fois, et l'effet est le même.

Remarque : Le code ci-dessus est basé sur Bootstrap v2. Si vous utilisez Bootstrap v3, le code HTML de la boîte de dialogue modale et la manière d'écrire l'événement sont quelque peu différents. pour l'événement caché ci-dessus, il doit être écrit comme suit :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!