Markierte Kontrollkästchen seitenübergreifend speichern - wie geht das am besten?

Question

Ich brauche, um Funktionalität ähnlich wie Google Mail hinzufügen, wo die Checkboxen auf einer Liste von Elementen über mehrere Seiten der Ergebnisse und beim Weggehen und Zurückkehren zu dem Ergebnis gespeichert wird. Was ich versuche, herauszufinden, ist der beste Weg, dies zu tun. Ich bin mit PHP und wahrscheinlich jQuery.

Mein erster Gedanke ist, ein onClick zu jedem Kontrollkästchen hinzuzufügen, das einen AJAX-Aufruf zurück an den Server auslöst, der die ID in einem Array in der Sitzung speichert. Jedes Mal, wenn eine Liste von Elementen geladen wird, würde das System prüfen, ob die Zeile markiert ist, und das Kontrollkästchen bei Bedarf aktivieren. Um die Zuverlässigkeit zu gewährleisten, würde das Kontrollkästchen nach der Überprüfung deaktiviert werden, wenn die Anfrage an den Server nicht abgeschlossen werden kann (Verbindungsproblem, Serverfehler usw.), und die Anfrage würde so schnell wie möglich erfolgen.

Das hört sich alles gut an, bis auf ein paar Punkte:

• Alles prüfen: Was passiert? Werden 30 Anfragen (Standard-Seiteneinträge) an den Server gesendet? Oder entferne ich alle onClicks, aktiviere die Kontrollkästchen, sende eine Anfrage an den Server mit allen IDs und füge dann die onClicks wieder hinzu? Oder...? Ähnliches Problem mit uncheck all.
• Geschwindigkeit: Es könnte zu Problemen kommen, wenn Hunderte von Nutzern die ganze Zeit das Häkchen setzen und entfernen.
• Browsergeschwindigkeit: Ich denke, es ist am besten, die onClick mit JS hinzufügen, nachdem die Seite lädt, die ich denke, könnte eine Sekunde oder 2, wenn es 500 oder mehr Elemente auf einer Seite sind. Würde ein größeres Problem mit Check alle werden.

In der Vergangenheit habe ich keine zuverlässige Methode gefunden, um zu erkennen, wann der Benutzer eine Seite verlässt. Wenn es einen zuverlässigen Weg, dann könnte ich sehen, dies als eine Option, so dass es nur Datensätze auf jeder Seite entladen.

Gibt es andere Lösungen oder bessere Methoden?

Editar: Wie bereits von Eran Galperin Die Check-All-Methode bräuchte nur jedes der Kontrollkästchen zu überprüfen und dann einen Ajax-Aufruf mit allen Zeilen durchzuführen. Keine Notwendigkeit, die onClick zu entfernen.

Außerdem sieht es so aus, als ob die Methode der Ereignisdelegation eine gute Idee ist - sie würde die Dinge viel einfacher machen.

Answer 1

1. Ein onclick-Ereignis wird nicht ausgelöst, wenn Sie den Status eines Kontrollkästchens programmatisch ändern. Sie können eine andere AJAX-Anfrage senden, wenn ein Benutzer auf den Link "Alles ankreuzen" / "Alle ankreuzen" klickt, ohne sich um die Klick-Ereignisse zu kümmern, die Sie den einzelnen Kontrollkästchen zugeordnet haben.
2. Dies ist der Kompromiss bei der Verwendung einer Anfrage pro Klick. Alternativ können Sie auch eine Schaltfläche "Speichern" verwenden, die das gesamte Formular speichert.
3. Verwenden Sie Veranstaltungsdelegation - Hängen Sie ein Onclick-Ereignis an den gesamten Container an, der alle Kontrollkästchen enthält, und überprüfen Sie das Ziel des Ereignisses, um zu sehen, ob ein Kontrollkästchen angeklickt wurde. Außerdem würde ich persönlich vermeiden, 500 verschiedene Optionen auf derselben Seite anzuzeigen. Wenn es unbedingt notwendig ist, so viele Optionen zu haben, unterteilen Sie sie in mehrere Bereiche/Seiten.

Wenn ein Benutzer die Seite verlässt, können Sie die onbeforeonload Wenn der Browser jedoch abstürzt oder anderweitig ungewollt beendet wird, wird dies nicht aufgefangen. Verwenden Sie es, je nachdem, wie wichtig es ist, Benutzeränderungen zu erfassen.