Einfach dynamisch

Teil 5: Tipps & Tricks für Ajax

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.

Ajax: Tipps & Tricks

© Archiv

Trotz Datenbankzugriff muss nicht die komplette Seite nachgeladen werden.

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>

Mehr zum Thema

Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Amazon Blitzangebote
Technik-Deals

Die Highlights der Amazon Blitzangebote - heute mit Weihnachts-Angebote-Woche, YI 4K Actioncam, Samsung TV-Testsieger und mehr.
Tipps zum leisen PC
Tipps und Tricks

Die Komponenten eines PCs erzeugen Hitze. Lüfter sorgen meist für eine lästige Geräuschkulisse. Mit unseren Tricks wird Ihr PC flüsterleise.
SSD Mythen Tipps
Solid State Disk

SSD-Tuning - was ist wahr, was ist falsch? Wir verraten, welche SSD-Mythen Sie vergessen können und welche Tipps wirklich helfen.
Urlaubsbilder
Fotografieren im Sommer

Von Sommerlicht bis Sonnernuntergang: Unsere 7 Tipps verraten, wie Sie Urlaubsfotos richtig machen und schöne Bilder mit nachhause bringen.