Einfach dynamisch

Teil 6: Tipps & Tricks für Ajax

Wie Sie erkennen, wurde auch bereits die Ordnerstruktur angepasst und anstelle von Ländern drei Fußball-Mannschaften auf oberster Ebene angezeigt.

Inhalte laden

Der Zugriff auf die Datenbank erfolgt in der Datei writeNode.php. Da dort eine Reihe von Eingriffen notwendig ist, wird mit einer Kopie unter dem Namen writeNode_1.php gearbeitet. Für den korrekten Zugriff auf die neue PHP-Datei müssen Sie in der Datei folder-tree-static.js im Verzeichnis js die Variable ajaxRequestFile entsprechend anpassen.

Als Erstes bauen Sie eine Verbindung zum Datenbankserver und der darauf eingerichteten Datenbank auf.

$connection = mysql_connect
('<dbserver>', '<db_user>', <pw>');
if (!$connection) {
die('Verbindung zur Datenbank
fehlgeschlagen: ' . mysql_error());
}
mysql_select_db("<dbname>",
$connection);

Die Werte in eckigen Klammern müssen Sie durch Ihre eigenen Daten ersetzen.

In der nächsten Ordnerebene sollen vier Kategorien und somit technisch gesehen Verzeichnisse erstellt werden, auf welche die Spieler anschließend aufgeteilt werden: Torhueter, Abwehrspieler, Mittelfeld und Sturm.

Diese werden der obersten Ebene über die parentID zugeordnet, also für den FC Bayern alle Einträge, die mit einer 1 beginnen. Die nächste Ebene mit den Spielerpositionen erhält dann einen fortlaufenden Zähler - die Torhüter haben somit die ID 11.

Ajax: Tipps & Tricks

© Archiv

Mithilfe von PHP und Javascript können Sie auch Drop-Down-Felder dynamisch aus der Datenbank füllen.

Diese Hierarchiestufen werden anschließend über einen switch-Befehl ausgewertet und für die zweite Ebene entsprechend der Datenbankzugriff definiert:

<?
break;
case "11":
?><?php
$sql="SELECT * FROM spieler WHERE
Zuordnung = '11'";
$erg = mysql_query($sql);
while($inf = mysql_fetch_
array($erg)){
echo "<li class=\"dhtmlgoodies_sheet.
gif\"><a href=\"#\">".$inf["Vorname"]." ".$inf["Nachname"]."</a></li>";
}
?>

Auf der Datenbank werden alle Spieler mit der Zuordnung 11 gesucht und im Array erg$ zwischengespeichert. Anschließend werden über eine Schleife für alle Einträge ein Listenelement generiert, dieses mit der Klasse dhtmlgoodies.gif versehen und ausgegeben.

Mithilfe von CSS wird so als Symbol ein Blatt angezeigt und dahinter der Vorname und Nachname des Torhüters. So können Sie analog auch für die anderen Spieler vorgehen und auch Spieler anderer Vereine ausgeben.

Planen Sie, mehrere Ebenen von der Datenbank zu laden, fügen Sie der ersten while-Schleife eine weitere Datenbankabfrage mit dem entsprechenden Abfragekriterium hinzu und geben Sie die Ergebnismenge über eine zweite while-Schleife wie im ersten Fall aus.

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…