Lösen Sie das Problem, dass Bootstrap Remote-Daten nur einmal lädt-H5-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-07-24 11:06:37

Original

1705 Leute haben es durchsucht

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 <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>

Nach dem Login kopieren

Der Anzeigeeffekt ähnelt dem Bild unten:

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

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

Nach dem Login kopieren

 <br/>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!