Nachtrag JQuery Klickpilot Basar

Nach dem es in der Vorlesung am Donnerstag noch einige Nachfragen zu JQuery gegeben hat. Habe ich nun in meinem Klickpilot die Verwaltung der Kunden von direkter DOM Manipulation auf JQuery umgestellt. Im Folgenden werde ich hier die wesentlichen Quelltext Abschnitte knapp darlegen. Die gesamte Demo können Sie via GitHub hier beziehen. JQuery ist nicht Klausur relevant, Sie müssen aber für die Klausur wissen wie man Elemente über den DOM abfragen, anlegen und wie man Event Handler registrieren kann, natürlich können Sie dies auch via JQuery Quellcode in der Klausur darlegen.

Die Verwaltung der Basar-Kunden teilt sich in die zwei bekannten HTML Seiten auf Übersicht der Kunden als Tabelle und anlegen und bearbeiten von Kunden. Als erstes möchte ich Ihnen den JavaScript Code für die anlegen und bearbeiten Seite darstellen.



Der Quelltext zeigt wie Sie mit JQuery Event Listener registrieren können am Beispiel des Click Handler. Weiter zeigt das Beispiel wie Sie mit JQuery über die Doller Funktion auf Elemente über die ID zugreifen können und wie man auf die Value Attribute auslesen kann.

Auf der Kunden Übersichtsseite sollen alle Kunden in einer Tabelle angezeigt werden. Dazu muss via JavaScript der Inhalt des Klickpilotmodells als HTML Tabelle ausgegeben werden. Der Folgende Quelltext Abschnitt zeigt wie mit JQuery dynamisch HTML Elemente erzeugt werden können.



Im Quelltext oben sehen Sie wie einfach HTML Elemente via JQuery in den DOM eingehängt werden können. Wenn Sie dies direkt auf dem DOM machen benötigen Sie einiges mehr an DOM Glue Code, schauen Sie sich dazu einfach das DOM basierte Kassen Beispiel an.

Den Quelltext getestet habe ich in den folgenden Browsern: Firefox Version 3, Safari Version 5 und Google Chrome Version 7.

Links:

• JQuery Tutorial - http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery