Kontrollkästchen in jQuery UI-Dialogen anzeigen und die Schaltfläche Abbrechen anzeigen
Ich versuche, wahrscheinlich ein sehr häufiges Problem zu lösen und habe einen vereinfachten Testfall vorbereitet, der es und meine Bemühungen demonstriert.
Ich versuche, mehrere jQuery-UI-Dialoge anzuzeigen, die jeweils mehrere Kontrollkästchen desselben Namens enthalten ( früchte und Süßigkeiten in meinem Testcode unten)
In jedem Dialogfeld habe ich vier Schaltflächen: Speichern , Abbrechen , Alle auswählen und Auswahl aufheben :
Die ersten 3 Tasten funktionieren bereits in meinem Code.
Die Schaltfläche Aktualisieren wird Rufen Sie die fnDraw () - Funktion von DataTable auf, dieser Teil funktioniert bereits. (Und ich möchte nicht die Checkbox-Werte auf dem Server dazwischen speichern, ich möchte alles auf der Client-Seite tun - ich weiß, das ist möglich).
Mein Problem besteht darin, die Abbrechen -Schaltfläche für die Dialoge zu implementieren:
1) Ich sollte wahrscheinlich eine Liste der aktuell gesetzten Checkboxen im Dialog open event speichern? Und dann wiederherstellen sie auf Abbrechen klicken? Gibt es dafür einen eleganten jQuery-Weg?
2) Ich weiß nicht, wie man nur die Checkboxen des gerade geöffneten Dialogs bearbeitet.
Unten ist mein aktueller Testcode, der sofort funktioniert - dank Google CDN:
%Vor%UPDATE: Dank mootinator funktioniert der folgende Code, aber ich habe immer noch zwei kleinere Probleme / Fragen:
1) Kann anstelle der benutzerdefinierten Methode openDialog () das Ereignis open verwendet werden?
2) Mit den Schaltflächen "Alle abwählen" und "Alle auswählen" können Sie alle Kontrollkästchen auf der Seite ändern, anstatt nur diejenigen zu ändern, die zum aktuellen Dialogfeld gehören. Ich frage mich, wie ich nur die letzteren auswähle? (Verwenden Sie irgendwie $ (this) in selectAll () und deaktivieren SieAll ())?
Ich habe es versucht
%Vor%aber Syntaxfehler erhalten.
UPDATE2: Eigentlich habe ich ein drittes und größeres Problem: Der schließende X-Knopf in der oberen rechten Ecke des Dialogs funktioniert nicht so wie er sollte (er speichert statt abzubrechen).
Ich habe versucht, close: cancel, beiden Dialogen hinzuzufügen, aber ich bekomme den Laufzeitfehler in Chrome:
%Vor%UPDATE3: Wahrscheinlich, weil ich $ (this) .dialog ('close') in einer Schleife anrufe?
Ich sehe keinen einfachen Weg, es zu beheben: wenn ich eine separate Funktion erstelle
%Vor%und übergeben Sie es als schließen: Wiederherstellen zu Dialogen, dann die Speichern -Schaltfläche bricht
2 Antworten
Ich habe ein paar Änderungen an Ihrem Code vorgenommen. Wahrscheinlich wäre das einfachste was zu tun wäre (nicht unbedingt das beste), den Zustand in einer globalen Variable zu speichern. (Eine robustere Lösung könnte nur das Speichern des Status neben dem Dialogstatus / den Optionen sein.)
UPDATE : Bereinige die Lösung, um den Anfangszustand auf der Checkbox selbst im DOM anstatt in einer globalen Variablen zu speichern.
Ich habe eine benutzerdefinierte Funktion zum Öffnen hinzugefügt, um den Status zu speichern und die Abbruchfunktion abzuschließen. Vielleicht möchten Sie auch die 'ursprünglichen' Eigenschaften bereinigen, wenn Sie removeProp schließen, aber das ist nicht unbedingt notwendig.
Hier sind die Änderungen, die Sie für Punkt # 1 (open: openDialog) vornehmen würden, um openDialog nicht direkt aufrufen zu müssen.
%Vor%Und so sollte Ihre Auswahl / Abwahl aussehen, um nur auf den geöffneten Dialog zu wirken:
%Vor% Und hier ist openDialog bearbeitet, um this anstelle des jQuery-Selektors zu verwenden:
- In Ihrer Speicherfunktion sollten Sie Ihr serverseitiges Skript aufrufen (mit AJAX - hier jQuery-Dokumente ) und speichern den Status jedes Kontrollkästchens (falls Sie das natürlich möchten)
- In der Abbruchfunktion bleibe ich einfach beim Schließen des Dialogs, da Sie nichts ändern müssen. Das Zurücksetzen der durch das Speichern vorgenommenen Änderungen ist sinnlos, da Sie die gewünschten Kontrollkästchen jederzeit aktivieren / deaktivieren und erneut speichern können.
- Nur die Kontrollkästchen des gerade geöffneten Dialogs bearbeiten - Weisen Sie dem div-Container eine eindeutige ID zu und verwenden Sie
$('#div_id input[type="checkbox"]')selector
Tags und Links jquery jquery-selectors jquery-ui checkbox jquery-ui-dialog