====== JQuery ====== ===== Fortschrittstabelle ===== ==== Sinn und Zweck ==== ...hiervon ist es, eine Tabelle zu erstellen, deren Einträge per Ajax im Hintergrund abgeholt werden und deren Status dargestellt wird. \\ Zusätzlich wird noch graphisch angezeigt welcher Eintrag aktuell verarbeitet wird (mittels Aktivitätskringel). ==== Beispiel ==== Siehe [[https://wiki.ex23.de/examples/jquery/table/table.html |hier]]. === HTML/Javascript ===
DescriptionResult
One
Two
Three
Four
 Hierbei handelt es sich um eine html Seite bestehend aus einer Tabelle und Javascript. \\ Der Javascript-Einsprungspunkt ist das $(document).ready Event. == $(document).ready == * Ruft runAjaxEntries auf, wenn das Dokument vollständig geladen wurde. == runAjaxEntries == * Iteriert über die DIVs (rechte Spalte der Tabelle) und ruft nacheinander per AJAX das Skript "data.php" mit dem POST-Parameter 'num' auf, dessen Wert die ID des aktuellen DIVs enthält. * Ist der Ajax-Aufruf beendet (done-Event), wir der Parameter 'msg', welche die Daten von data.php als JSON beinhaltet, unter dem Key 'msg' im DIV-Objekt gespeichert. * Der boolsche Wert 'msg.resultb' soll anzeigen, ob der Aufruf geklappt hat. Je nach dessen Wert, wird unterschiedliches im HTML des aktuellen DIVs angezeigt. * Falls der Aufruf erfolgreich war, wird die Methode runAjaxEntries rekursiv für den nächsten Eintrag aufgerufen. * Falls der Aufruf fehlschlägt wird abgebrochen. * Schließlich wird noch für das 'dblClick'-Event ein Aufruf von displayText aboniert. == displayText == * Holt die gespeicherten JSON Daten wieder aus dem Object (Schlüssel 'msg') * Je nach Parameter 'mode', wird unterschliedliches angezeigt. * Es wird der aktuelle Anzeige-modus unter dem Schlüssel 'mode' als String gespeichert. === PHP === Dieses PHP-Skript erfüllt folgende Aufgaben: * Schlafen (sleep), damit die busy-Animation auch dargestellt wird. * Per POST übergebener Parameter 'num' (hier 1,2,3 oder 4) lesen. * Array $return mit den Rückgabewerten füllen. * Mittels json_encode das Array als JSON zurückgeben. ====== Links ====== * [[http://jquery.com/]] * [[http://jqueryui.com/]]