Lösen Sie das Problem, dass Bootstrap Remote-Daten nur einmal lädt

Zusammenfassung: Für das modale Dialogfeld des Front-End-Frameworks Bootstrap können Sie mit der Remote-Option eine URL angeben, sodass das Dialogfeld beim Auftauchen automatisch Daten von dieser Adresse in .modal-body lädt Zum ersten Mal, aber nur einmal Es wird einmal geladen, aber dieses Problem kann durch Aufrufen der Methode „removeData()“ im Ereignis gelöst werden.

1. Modales Bootstrap-Dialogfeld und einfache Verwendung

 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

Der Anzeigeeffekt ähnelt dem Bild unten:

Modale Dialoge können direkt über Schaltflächen oder Links aufgerufen werden. Dies ist eine einfache Verwendung:

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

 <br/>

Hiermit können nur statische Inhalte im Dialogfeld angezeigt werden. Verwenden Sie die Remote-Option des Dialogfelds, um stärkere Effekte zu erzielen.

2. Verwenden Sie die Remote-Option, damit der modale Dialog die Seite in .modal-body lädt.

Es gibt zwei Methoden: Eine besteht darin, einen Link zu verwenden, die andere darin, ein Skript zu verwenden .

2.1 Verwendung von Links

c06a237a3239f2443464e77605828245打开对话框5db79b134e9f6b82c0b36e0489ee08ed

Wenn auf diesen Link geklickt wird, wird der Inhalt von page.jsp in die .modal von geladen Im Dialogfeld-Körper wird ein Dialogfeld angezeigt.

2.2 Verwendung eines Skripts

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

Die Wirkung dieses Skripts ist die gleiche wie die Verwendung eines Links. Wenn dieses Skript ausgeführt wird, Die Seite Der Inhalt der .jsp wird in den .modal-Body des Dialogfelds geladen und das Dialogfeld wird angezeigt.

Hinter diesen beiden Methoden ruft Bootstrap die Methode „load()“ von jQuery auf, um die Seite „page.jsp“ vom Server zu laden. Dieses Laden erfolgt jedoch nur einmal, egal wie oft Sie auf den Link klicken oder das Skript mehrmals ausführen oder sogar den an die Remote-Option übergebenen Wert ändern. Das ist wirklich ein Problem . Das Problem lässt sich jedoch noch lösen.

3. Daten entfernen, damit das Dialogfeld die Seite jedes Mal neu laden kann, wenn es geöffnet wird

Nachdem ich relevante Dokumente durchsucht und konsultiert habe, habe ich festgestellt, dass im versteckten Ereignis des Dialogfelds eine Nachricht geschrieben wird box Die Anweisung reicht aus:

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

Sie können die Daten auch jedes Mal entfernen, bevor Sie das Dialogfeld öffnen, und der Effekt ist der gleiche.

Hinweis: Der obige Code basiert auf Bootstrap v2. Der HTML-Code des modalen Dialogfelds und die Art und Weise, wie das Ereignis geschrieben wird, unterscheiden sich beispielsweise etwas. Für das oben genannte versteckte Ereignis sollte es wie folgt geschrieben werden:

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

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem, dass Bootstrap Remote-Daten nur einmal lädt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!