Teil 5: Tipps & Tricks für Ajax
Nach der Auswahl einer Position wird der Wert des Elements an die Funktion getSpieler() übergeben. Dort erfolgt...
Nach der Auswahl einer Position wird der Wert des Elements an die Funktion getSpieler() übergeben. Dort erfolgt
function getSpieler(sel) {
var pos = sel.options[sel.
selectedIndex].value;
document.getElementById
('fcb_spieler').options.length = 0; // Empty city select box
if(pos.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile =
'getSpieler.php?pos='+pos;
ajax[index].onCompletion =
function(){ createSpieler(index) };
ajax[index].runAjax();
}SACK vereinfacht den Aufbau einer Verbindung im Hauptprogramm, indem es auf vordefinierte Routinen zurückgreift. Nachdem sichergestellt ist, dass auch eine Auswahl getroffen wurde, generiert die Funktion den Aufruf des PHP-Skripts und übergibt die Spielerposition aus der Variablen pos. Sobald die Abfrage beendet ist, wird die Funktion createSpieler() aufgerufen.
function createSpieler(index) {
var obj = document.getElementById
('fcb_spieler');
eval(ajax[index].response);
}Die zweite DropDown-Box wird in dieser Funktion mit dem Ergebnis der Abfrage gefüllt. runAjax() führt die Abfrage aus und füllt die entsprechenden Rückgabevariablen. Eine komplette Dokumentation von SACK erhalten Sie im Download-Paket unter .
Navigation dynamisieren
Wenn Sie Ihren Besuchern Daten auf Ihrer Website anbieten, können Sie diese unterschiedlich anordnen. Eine Option ist der Aufbau einer hierarchischen Ordnerstruktur analog dem Windows Explorer. Es gibt zahlreiche statische Implementierungen auf Basis von Javascript.
In dieser vorgestellten Lösung können Sie jedoch die Ordnerstruktur dynamisch auf Basis von Datenbankeinträgen aufbauen. Grundlage ist wieder die Datenbanktabelle spieler, welche um eine weitere Spalte Zuordnung vom Typ VARCHAR(3) ergänzt wird.
Die Grundlage für die Darstellung der Ordnerstruktur bietet das Ajax-Beispiel Static List based folder tree (). In diesem wird eine dynamische Liste auf Basis einer PHP-Datei aufgebaut, allerdings ohne Datenbankzugriff für die einzelnen Knotenpunkte.
Den Ausgangspunkt bildet die Datei folder-tree-static.html, welche im obersten Verzeichnis sitzt. In diesem geben Sie die erste Ordnerebene an.
Sie finden im Beispiel zwei Lösungen, eine statische und eine dynamische - die erste können Sie komplett löschen, da die Ordnerstruktur komplett über statisches HTML-Coding aufgebaut wird. Damit sieht der verbleibende HTML-Body wie folgt aus:
<ul id="dhtmlgoodies_tree" class=
"dhtmlgoodies_tree"><li><a href="#" id="node_1">
FC Bayern</a><ul><li parentId="1"><a href="#" id=
"node_2">Loading...</a></li></ul></li><li><a href="#" id="node_3">
VfB Stuttgart</a><ul><li parentId="2"><a href="#" id=
"node_4">Loading...</a></li></ul></li><li><a href="#" id="node_5">1899
Hoffenheim</a><ul><li parentId="3"><a href="#" id=
"node_6">Loading...</a></li></ul></li></ul><a href="#" onclick="expandAll
('dhtmlgoodies_tree');return false">Alles aufklappen</a><a href="#" onclick="collapseAll
('dhtmlgoodies_tree');return false">Ordner schließen</a>
