Private Webseite von Michael Wellner - Typo3 und Ajax mit jQuery

Typo3 und Ajax mit jQuery

Veröffentlicht am 13. Juli 2011

Da typo3 (zumindest meiner Ansicht nach) zur Zeit nicht immer technisch ganz auf der Höhe ist, gibt es auch noch keine "offizielle" Möglichkeit Seiteninhalte - also nur Teile einer ganzen (von typo3 erzeugten) Seite - per Ajax nachzuladen, um sie auf der geladenen Seite zu platzieren. Hier möchte ich kurz meine Lösung vorstellen.

Bevor ich meinen eigenen Kopf angestrengt habe um eine funktionierende Lösung zu finden, habe ich natürlich zunächst Google konsultiert. Hier fand sich auch ein ganz guter Ansatz, welcher die Funktionalität von typeNum ausnutzt, um spezielle Ajax-Antworten zu generieren. Hierfür muss nur das Template der Seite entsprechend angepasst werden. Das sieht dann in etwa so aus (Quelle: http://blog.kj187.de/2010/03/09/typo3-und-ajax-wie-geht-das/):

1
2
3
4
5
6
7
8
9
10
11
12

ajaxCall = PAGE
ajaxCall {
   typeNum = 5000
   10 < plugin.tx_unsereextension_pi1
   config {
      disableAllHeaderCode = 1
      xhtml_cleaning = 0
      admPanel = 0
      debug = 0
      no_cache = 1
   }
}

Mit dieser Methode ist es möglich ein angepasstes Template zurück zu liefern, wenn die Seite mit einer definierten Ajax typeNum aufgerufen wird. Nur leider funktioniert das nur so richtig gut, solange man kein TemplaVoila einsetzt und Seiteninhalte antworten möchte, die nicht aus einer eigenen Extension kommen (wie in dem Beispiel oben).

Möchte man nur bestimmte Teiler einer normalen Inhaltsseite, welche auf einem TemplaVoila-Template basiert, empfangen benötigt man einen anderen Ansatz. Nach etwas recherche kam ich dazu dafür die jQuery Methode load() zu nutzen. Sie ermöglicht es, nur einen bestimmten Teil einer per Ajax geladenen HTML-Datei zu selektieren. Das macht das nachladen sehr einfach und praktisch unabhängig von typo3. Will man beispielsweise das Element content neu laden, sehe das so aus:

$("#content").load("http://mein.typo3.url #content");

Simple oder? :)