Ich benutze Twitter Bootstrap, ich habe ein Modal angegeben
<div class="modal hide" id="modal-item">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Update Item</h3>
</div>
<form action="http://www.website.com/update" method="POST" class="form-horizontal">
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Update Item</button>
</div>
</form>
</div>
Und die Links
<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>
Wenn ich zum ersten Mal auf einen dieser Links klicke, wird der richtige Inhalt angezeigt. Wenn ich jedoch auf andere Links klicke, wird derselbe Inhalt angezeigt, der zum ersten Mal geladen wurde. Der Inhalt wird nicht aktualisiert.
Ich möchte, dass es jedes Mal aktualisiert wird, wenn es angeklickt wird.
PS: Ich kann es einfach über die benutzerdefinierte jQuery-Funktion zum Laufen bringen, aber ich möchte wissen, ob es mit der nativen modalen Bootstrap-Remote-Funktion möglich ist, da es einfach genug sein sollte und ich denke, ich mache die Dinge nur komplizierter.
jquery
jquery-plugins
twitter-bootstrap
modal-dialog
Dhruv Kumar Jha
quelle
quelle
remote
Modals ab Bootstrap v3.2.1 veraltet sind und in v4 nicht mehr verfügbar sind .Antworten:
Das Problem ist zweifach.
Zuerst einmal ein Modal Objekt instanziiert wird, wird es dauerhaft an das Element angebracht , indem angegeben
data-target
und nachfolgende Anrufe zu zeigen , dass modale nur nennentoggle()
drauf, aber nicht die Werte in der Aktualisierungoptions
. Obwohl diehref
Attribute in Ihren verschiedenen Links unterschiedlich sind, wird der Wert für beim Umschalten des Modalsremote
nicht aktualisiert. Bei den meisten Optionen kann dies umgangen werden, indem das Objekt direkt bearbeitet wird. Zum Beispiel:In diesem Fall funktioniert das jedoch nicht, weil ...
Zweite ist das Modal-Plugin so konzipiert, dass die Remote-Ressource in den Konstruktor des Modal-Objekts geladen wird . Dies bedeutet leider, dass selbst wenn eine Änderung am vorgenommen wird
options.remote
, diese niemals neu geladen wird .Eine einfache Abhilfe besteht darin, das Modal-Objekt vor dem anschließenden Umschalten zu zerstören. Eine Möglichkeit besteht darin, es einfach zu zerstören, nachdem es sich versteckt hat:
Hinweis: Passen Sie die Auswahl nach Bedarf an. Dies ist die allgemeinste.
Plunker
Oder Sie könnten versuchen, ein komplizierteres Schema zu entwickeln, um beispielsweise zu überprüfen, ob sich der Link, der das Modal startet, von dem vorherigen unterscheidet. Wenn ja, zerstöre; Wenn dies nicht der Fall ist, muss es nicht neu geladen werden.
quelle
hide
Klasse auf dem Modal vergessen. Wenn Ihr Fenster also zu klein war, hat das Modal möglicherweise Mausereignisse auf den Schaltflächen blockiert. Aus irgendeinem Grund ist JSFiddle.net heute Morgen wirklich schlecht (ein 504 hat versucht zu aktualisieren), deshalb habe ich das Beispiel auf plnkr.co überarbeitet, was für AJAX sowieso besser ist.bs.modal
in$(this).removeData('bs.modal')
arbeitete für mich mit Bootstrap 3$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
var modalData = $(this).data('bs.modal'); if (modalData && modalData.options.remote)...
Für Bootstrap 3 sollten Sie Folgendes verwenden:
quelle
remoteData
Zeile Folgendes hinzufügen können :$(this).empty()
$(this).empty()
. Dieremote
Option lädt die entfernten Daten in das verschachtelte<div class="modal-content">
Element. Verwenden Sie$('.modal-content', this).empty();
stattdessen.Für Bootstrap 3.1 möchten Sie Daten entfernen und
modal-content
nicht den gesamten Dialog (3.0) leeren , um das Flackern zu vermeiden, während Sie auf das Laden von Remote-Inhalten warten.Wenn Sie nicht entfernte Modalitäten verwenden, entfernt der obige Code natürlich deren Inhalt, sobald er geschlossen ist (fehlerhaft). Möglicherweise müssen Sie diesen Modalen (wie einer
.local-modal
Klasse) etwas hinzufügen, damit sie nicht betroffen sind. Ändern Sie dann den obigen Code in:quelle
$(e.target).removeData("bs.modal").find(".modal-content").empty();
es so, als würde mein Modal irgendwie ausgeblendet und nur das graue Overlay erscheint.Danke merv. Ich habe angefangen, an boostrap.js herumzubasteln, aber Ihre Antwort ist eine schnelle und saubere Problemumgehung. Folgendes habe ich letztendlich in meinem Code verwendet.
quelle
Die akzeptierte Antwort hat bei mir nicht funktioniert, deshalb habe ich mich für JavaScript entschieden.
quelle
Dies funktioniert mit Bootstrap 3 FYI
quelle
Mein Projekt ist in Yii erstellt und verwendet das Bootstrap-Yii-Plugin. Diese Antwort ist daher nur relevant, wenn Sie Yii verwenden.
Das obige Update hat funktioniert, aber erst nach dem ersten Mal wurde das Modal angezeigt. Das erste Mal war es leer. Ich denke, das liegt daran, dass Yii nach der Initiierung des Codes die Hide-Funktion des Modals aufruft und dadurch meine Initiierungsvariablen löscht.
Ich fand, dass das Setzen des removeData-Aufrufs unmittelbar vor dem Code, der das Modal startete, den Trick machte. Mein Code ist also so aufgebaut ...
quelle
In Bootstrap 3.2.0 muss sich das Ereignis "Ein" im Dokument befinden und Sie müssen das Modal leeren:
In Bootstrap 3.1.0 kann sich das Ereignis "on" auf dem Body befinden:
quelle
Warum nicht mit BS 3 allgemeiner machen? Verwenden Sie einfach "[etwas] Modal" als ID des modalen DIV.
quelle
Die einzige Arbeitsoption für mich ist:
Ich benutze Bootstrap 3 und habe eine Funktion namens,
popup('popup content')
die die modale Box HTML anhängt.quelle
Hinzufügen eines $ (this) .html (''); um auch sichtbare Daten zu löschen, und es funktioniert ziemlich gut
quelle
Wenn eine Remote-URL angegeben wird, wird der Inhalt einmalig über die Lademethode von jQuery geladen und in die .modal-content div eingefügt. Wenn Sie die Daten-API verwenden, können Sie alternativ das href-Attribut verwenden, um die Remote-Quelle anzugeben. Ein Beispiel hierfür ist unten dargestellt
quelle
Ich habe so etwas hinzugefügt, weil der ältere Inhalt angezeigt wird, bis der neue angezeigt wird. Mit .html ('') im .modal-Inhalt wird der HTML-Code gelöscht. Ich hoffe, es hilft
quelle
Ich habe ein einfaches Snippet geschrieben, das die Aktualisierung des Modals behandelt. Grundsätzlich speichert es den angeklickten Link in den Daten des Modals und prüft, ob es sich um denselben Link handelt, auf den geklickt wurde, wobei die Modaldaten entfernt werden oder nicht.
quelle
Für Bootstrap 3 habe ich in modal.js Folgendes geändert:
zu
(zusätzlicher Abstand zur Klarheit hinzugefügt)
Dies verhindert ein unerwünschtes Flashen alter modaler Inhalte, indem leer () für den modalen Container aufgerufen und die Daten entfernt werden.
quelle
Dieser arbeitet für mich.
quelle
Dieser andere Ansatz funktioniert gut für mich:
quelle
Welches HTML-Element möchten Sie wie leeren (div, span was auch immer).
quelle
Dieser funktioniert für mich:
modal
Skript
Links-Bereich ist Bereich, in dem ich die Daten platziere und löschen muss
quelle
Erweiterte Version der akzeptierten Antwort von @merv. Außerdem wird überprüft, ob ausgeblendete Modaldaten von einer Remote-Quelle geladen wurden, und alte Inhalte werden gelöscht, um ein Flashen zu verhindern.
https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5
quelle
Getestet auf Bootstrap Version 3.3.2
quelle
.removeData()
ohne Parameter wird zeigen , jquery , um alle Daten zu entfernen , um dieses Element befestigt ist . Was das Problem des OP betrifft,.removeData('bs.modal')
oder.removeData('modal')
würde ausreichen und ist sehr sicher.Viel Glück mit diesem:
quelle