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

Cover Internet Magazin 6/2010
Praxis-Knowhow für Web-Profis

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: Wordpress als CMS einsetzen: Stabil, ausgereift,…
Inhaltsverzeichnis Internet Magazin 7/2010
Praxis-Knowhow für Web-Profis

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: HTML5 & CSS3 schon jetzt: Alle neuen Features ohne…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen eine mobile Webseite oder App erstellen? jQuery Mobile bietet Funktionen und Optik, die für die mobile Nutzung unverzichtbar sind. Zudem…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihre mobile Webseite übersichtlich gestalten? Wir zeigen Ihnen, wie Sie mit jQuery Mobile ganz einfach Listen, Buttons und eine…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihrer mobilen Webseite ein individuelles Aussehen geben oder beim Laden der Seite eine Meldung anzeigen lassen? Wir zeigen Ihnen, wie Sie…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017