Ich verwende das modale Popup von Twitter Bootstrap.
<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>
Ich kann Inhalte mit Ajax mit diesem a-Element laden:
<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>
Jetzt muss ich das gleiche Modal öffnen, aber eine andere URL verwenden. Ich verwende dieses Modal, um eine Entität aus meiner Datenbank zu bearbeiten. Wenn ich also auf eine Entität auf Bearbeiten klicke, muss ich das Modal mit einer ID laden.
<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>
Wenn ich auf Link Nummer 1 klicke, funktioniert es gut. Wenn ich dann aber auf Link Nummer 2 klicke, ist der modale Inhalt bereits geladen und zeigt daher den Inhalt von Link Nummer 1 an.
Wie kann ich den mit Ajax geladenen Inhalt in einem modalen Twitter-Bootstrap-Popup aktualisieren oder zurücksetzen?
javascript
twitter-bootstrap
stian.net
quelle
quelle
Antworten:
Ich habe das gleiche Problem, und ich denke, der Weg, dies zu tun, besteht darin, das Datenumschaltattribut zu entfernen und einen benutzerdefinierten Handler für die Links zu haben.
Etwas in den Zeilen von:
Werde es später versuchen und Kommentare posten.
quelle
Um die Daten zu entladen, wenn das Modal geschlossen ist, können Sie dies mit Bootstrap 2.x verwenden:
Und in Bootstrap 3 ( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ):
quelle
Sie können Modal zwingen, das Popup zu aktualisieren, indem Sie diese Zeile am Ende der Hide-Methode des Modal-Plugins hinzufügen (Wenn Sie bootstrap-Transition.js v2.1.1 verwenden, sollte es sich in Zeile 836 befinden).
Oder mit einem Event-Listener
quelle
load()
Aufruf aus dem Konstruktor in das zu verschiebenshow()
oder dem Plugin eine Methode hinzuzufügen, um ein erneutes Laden von manuell auszulösenremote
. Beim zweiten Vorschlag habe ich dies nur als Antwort auf eine Frage angegeben, bei der ausdrücklich darum gebeten wurde, dies nicht so zu tun, wie es @markz vorgeschlagen hat .Mit Bootstrap 3 können Sie den Ereignishandler 'hidden.bs.modal' verwenden, um alle modalbezogenen Daten zu löschen und das Popup beim nächsten Mal neu zu laden:
quelle
Basierend auf anderen Antworten (danke an alle).
Ich musste den Code anpassen, um zu funktionieren, da durch einfaches Aufrufen von .html der gesamte Inhalt gelöscht wurde und das Modal nach dem Ausführen mit keinem Inhalt geladen wurde. Also habe ich einfach nach dem Inhaltsbereich des Modals gesucht und dort das Zurücksetzen des HTML angewendet.
Kann immer noch mit der akzeptierten Antwort gehen, da ich kurz vor dem Laden des Modals einen hässlichen Sprung bekomme, da die Steuerung mit Bootstrap erfolgt.
quelle
Etwas komprimierter als das oben akzeptierte Beispiel. Greift das Ziel vom Datenziel des aktuell angeklickten Objekts mit Datenumschaltung = modal an. Dadurch müssen Sie nicht wissen, wie die ID des Zielmodals lautet. Verwenden Sie einfach dieselbe ID! weniger Code = gewinnen! Sie können dies auch ändern, um Titel, Beschriftungen und Schaltflächen für Ihr Modal zu laden, falls Sie möchten.
Beispiel-Links:
quelle
Ich habe eine kleine Änderung an der Softlion- Antwort vorgenommen, damit alle meine Modalitäten beim Verstecken nicht aktualisiert werden. Die Modalitäten mit dem Attribut data-refresh = 'true' werden nur aktualisiert, andere funktionieren wie gewohnt. Hier ist die modifizierte Version.
Verwenden Sie nun das unten gezeigte Attribut.
Dadurch wird sichergestellt, dass nur die Modalitäten mit data-refresh = 'true' aktualisiert werden. Und ich setze auch das modale HTML zurück, weil die alten Werte angezeigt werden, bis neue geladen werden, wodurch HTML leer wird und dieses Problem behoben wird.
quelle
Hier ist eine Coffeescript-Version, die für mich funktioniert hat.
quelle
Es funktioniert für alle Versionen von Twitterbootstrap
Javascript-Code:
Links zu Modal sind
Popup modal
quelle
Ich war auch bei diesem Problem festgefahren, als ich sah, dass die IDs des Modals gleich sind. Sie benötigen unterschiedliche Modal- IDs, wenn Sie mehrere Modalitäten möchten. Ich habe eine dynamische ID verwendet . Hier ist mein Code in
haml
:du kannst das
und deine Links zu Modal werden sein
Ich hoffe das wird für dich funktionieren.
quelle
Sie können dies versuchen:
quelle
Ich wollte, dass der von AJAX geladene Inhalt entfernt wird, wenn das Modal geschlossen wird, also habe ich die von anderen vorgeschlagene Zeile angepasst (Coffeescript-Syntax):
quelle
var $ table = $ ('# myTable2');
$ table.bootstrapTable ('destroy');
Hat für mich gearbeitet
quelle
Schritt 1: Erstellen Sie einen Wrapper für das aufgerufene Modal
clone-modal-wrapper
.Schritt 2: Erstellen Sie ein leeres Div mit dem Namen
modal-wrapper
.Schritt 3: Kopieren Sie das modale Element von
clone-modal-wrapper
nachmodal-wrapper
.Schritt 4: Schalten Sie das Modal von um
modal-wrapper
.quelle