AJAX (Asynchrones Javascript And XML) und Joomla lassen sich recht einfach zusammen nutzen. Egal ob in einer Joomla Komponente oder in einem Modul. Da ein Modul einfacher zu programmieren ist, möchte ich euch in dieser Beitragsreihe zeigen wie ihr ein Joomla Modul erstellen könnt das im Frondend ein Formular anzeigt, die Formulardaten an den Server sendet und von diesem verarbeitet wird. Zum Schluss wird das Ergebnis an den Browser gesendet und dort angezeigt.

Vorraussetzungen

Ihr habt ein aktuelles Joomla installiert mit einem Template bei dem ihr Module auf eine Modulposition legen könnt. Ihr sollte Module programmieren und installieren können und die AJAX Funktionen von jQuery grundlegend verstehen.

Die Komponente com_ajax

Die Komponente com_ajax ist seit der Joomla Version 3.2 standardmäßig dabei. Da die Komponente nicht im Backend sichtbar ist, werden sicherlich viele diese Komponente gar nicht kennen. Auf com_ajax bin ich über das „Hello Ajax World Module“ von Matt Thomas gestossen als ich nach einer Lösung für genau so eine Anwendung gesucht habe. Eine Beschreibung der Komponente findet ihr in der Joomla Dokumentation: What is The Joomla Ajax Interface (com_ajax). Auf dem Modul von Matt basiert letztlich auch unser Modul.

Com_ajax ist das Bindeglied zwischen den AJAX-Request der vom Browser an den Server gesendet wird und unserem Joomla Modul. Über die Komponente läuft  die gesamte Kommunikation ab, den eigentlich werden Joomla Module nur aufgerufen wenn die Website von Joomla gerendert und ausgegeben wird.

Ablauf

Wie läuft das ganze nun ab? Das Modul liegt auf einer Modulposition einer Seite und wird erst einmal ganz normal durch Joomla gerendert. In unserem Beispiel wird der HTML-Code für das Formular und das Javascript für den AJAX-Request ausgegeben und zusammen mit dem Rest der Seite an den Browser gesendet. Wird das Formular abgesendet, so werden die Formulardaten mit weiteren Parametern an den Server gesendet und an die Komponente com_ajax übergeben. Die Komponente ruft nun die Methode getAjax() in der Helper-Klasse in der Datei helper.php unseres Moduls auf und sendet den Rückgabe-Wert der Methode im JSON (JavaScript Object Notation) Format an den Browser zurück. Das Javascript kann die Daten nun nutzen und Anzeigen.

Wie gehts weiter

In den folgenden Beiträgen werden wir Schritt für Schritt das Modul fertigstellen.

Joomla und AJAX: Teil 1 – Grundlagen
Joomla und AJAX: Teil 2 – Das Modul im Frontend
Joomla und AJAX: Teil 3 – Modul Helper
Joomla und AJAX: Teil 4 – Modul Parameter
Joomla und AJAX: Teil 5 – Weitere Möglichkeiten

Weblinks

Joomla Dokumentation: Creating a simple module

Joomla Dokumentation: What is The Joomla Ajax Interface (com_ajax)

„Hello Ajax World Module“ von Matt Thomas

jQuery API Documentation: jQuery.ajax()