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

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 11044ab4e39092bf3655a081d6df70d6 2     0b561c7c414147a96bbbb8cc10c3d06d 3         6e52c62ccaa796a4ccb90a0458fc6482x65281c5ac262bf6d81768915a4a77ac0 4         684271ed9684bde649abda8831d4d355对话框标题39528cedfa926ea0c01e69ef5b2ea9b0 5     16b28748ea4df4d9c2150843fecfba68 6     6e1ceff927595656120650f97442eabc 7         e388a4556c0f65e1904146cc1a846bee对话框主体94b3e26ee717c64999d7867364b1b4a3 8     16b28748ea4df4d9c2150843fecfba68 9     fcea287e1681f6566fd9116658b8e4f010         3967e4ba8273165820a9b7674e47f6ae取消5db79b134e9f6b82c0b36e0489ee08ed11         68ea5ffc0ceb7fd5909bec72cbe1fb30确定5db79b134e9f6b82c0b36e0489ee08ed12     16b28748ea4df4d9c2150843fecfba6813 16b28748ea4df4d9c2150843fecfba68

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 :

d6301f9ab9f294fdeb81d11564d75ad2打开对话框65281c5ac262bf6d81768915a4a77ac04cbacbf3366c8120d74e550377e58870打开对话框65281c5ac262bf6d81768915a4a77ac0

 <br/>

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

c06a237a3239f2443464e77605828245打开对话框5db79b134e9f6b82c0b36e0489ee08ed

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

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

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

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!