AJAX Div Container einzeln laden oder mehrere Divs updaten

Wenn man mal schnell mit AJAX einen neuen Inhalt in einen Div-Container laden will, dann kann man das am einfachsten lösen, indem man jQuery einbindet und davon dann die load()-Funktion verwendet. Ein Beispiel aus der Doku:
Code:

$("#feeds").load("feeds.html");

Erläuterung: es wird der Inhalt der Adresse "feeds.html" in den Div-Container mit der ID "#feeds" reingeladen.
Code:

$("#feeds").load("feeds.html #feedlist");

Eine kleine Erweiterung. Hier wird nur der Container "#feedlist" von "feeds.html" in "#feeds" geschrieben. Man muss also nicht die ganze Seite laden, sondern kann gezielt eine Auswahl treffen.

Logischerweise empfiehlt sich dies nur, wenn man auch wirklich nur den einen Container updaten will. Wenn man mehrere Div-Container gleichzeitig neu laden will, dann sollte man sich irgendwie anders behelfen, um nicht zu viele Requests an den Server schicken zu müssen. Ein Beispiel:

Heute gerade hatte ich wieder das Script, was ich schonmal hier vorgestellt hatte, auf dem Tisch liegen, da das noch nicht beim Kunden auf der Webseite eingebaut war. Dort handelte es sich um eine TYPO3-Seite mit einer Thumbnailliste und zwei Contentbereichen. Die Thumbnails sollten stehen bleiben, aber die Contentbereiche sollten sich beim Klick auf die Thumbnails ändern.

Leider waren die Contentcontainer nicht so angeordnet, dass man sie in einem Zug hätte ersetzen können. Ich wollte es aber auch vermeiden, dass für jeden Container ein separater Request abgesetzt wird. In diesem Fall habe ich unter TYPO3 einen neuen Seitentyp (typeNum=11) erstellt, der nur den HTML-Code der beiden zu ändernden Container enthält. Selbstverständlich mit einem Trenner dazwischen, damit ich das hinterher wieder aufspalten konnte So habe ich einfach mit der jQuery-Funktion get() den neuen Inhalt in eine Variable geladen und per split() in ein Array umgewandelt. Das erste Arrayfeld enthielt nun den Wert für den ersten Container, das zweite für den Zweiten. Natürlich könnte man das quasi unendlich weiter ausdehnen. Über die jQuery-Funktion html(val) konnte ich nun die Inhalte in die Container schreiben.

So habe ich das in TYPO3 gelöst. Die Programmierung eines neuen Seitentyps war ja zum Glück schnell gemacht (5min). Meist hat man diese Möglichkeit aber nicht. Da muss man dann tricksen, um das mit mehreren Containern hinzubekommen, ohne für jeden Div-Container einen eigenen Request abzusetzen. Eine Lösung wäre beispielsweise, dass man die ganze Seite oder einen (alles umfassenden) Container daraus über die load()-Funktion in ein unsichtbares Div reinlädt und daraus dann über eine geschickte Anwendung der Selektoren und der jQuery html()-Funktionen die Inhalte aus dem temporären Div extrahiert und in die Zielcontainer schreibt. Hinterher sollte man den temporären Container allerdings besser wieder leeren. Und immer daran denken, die Selektoren genau genug zu verfassen. Die doppelte Vergabe von IDs, wie sie bei dieser Methode schon einmal vorkommen kann, kann dann schnell zu unerwünschten Ergebnissen führen:

Schlecht:
Code:

$("#content").html( $('#tempcontainer #content').html() );

Besser:
Code:

$("#bodywrap #content").html( $('#tempcontainer #content').html() );
// wobei #bodywrap der Hauptcontainer der Seite ist 
// und #tempcontainer der Temporäre