Nach dem es im Ersten Teil um den groben Überblick ging, wollen wir nun das Joomla Modul programmieren und die Funktion im Frontend betrachten. Das Modul nennen wir der Einfachheit halber mod_ajax. Wenn ihr das Modul für eure Projekte einsetzt, solltet ihr natürlich einen sinnvolleren Namen vergeben der die Funktion des Mobuls beschreibt.

Das Modul ist sehr einfach gehalten so das die Funktionsweise sichtbar ist. Es sollte so nicht in realen Projekten eingesetzt werden, da die übermittelten Werte nicht geprüftwerden. Den Quellcode für das Joomla Modul mod_ajax gibt es hier als Download. Ihr könnt das Modul mit der Zip-Datei im Joomla Backend hochladen und installieren.

Was macht das Modul

Das Modul gibt ein einfaches Formular aus und bindet eine Javascript Datei ein. Das Formular besteht aus einem Eingabefeld und einer Schaltfläche. Wird die Schaltfläche angeklickt, wird der Inhalt des Eingabefeldes mit weiteren Parametern als AJAX-Request an den Server gesendet. Als Ergebnis erhalten wir ein Text mit dem in Großbuchstaben umgewandelten Inhalt des Eingabefeldes der dann unter der Schaltfläche angezeigt wird.

Hier nun der HTML-Code:

<div class="mod_ajax">
	<form class="mod_ajax_form">
		<input type="text" name="formvalue" style="width: 80%;"/>
		<br />
		<input type="button" class="mod_ajax_submit" value="Absenden" />
	</form>
	<div class="mod_ajax_result"></div>
</div>

Um auf die Modulinhalte leichter zugreifen zu können, habe ich den Modulnamen als Klassen in den Tags angegeben.  Als nächstes sehen wir uns das JavaScript an.

function mod_ajax_send(){
	// AJAX-Parameter als JavaScript Objekt
	var	ajax_params = {
		'option' : 'com_ajax',
		'module' : 'ajax',
		'format' : 'json',
		'formvalue': jQuery('.mod_ajax_form input[name=formvalue]').val()
	};

	// AJAX Verarbeitung
	jQuery.ajax({
		type   : 'POST',
		data   : ajax_params,
		context: this,
		success: function (response) {
			// AJAX Aufruf erfolgreich
			if(response.success){
				// Verarbeitung von com_ajax erfolgreich
				jQuery('.mod_ajax_result').html(response.data);
			}
			else
			{
				// Fehler in der Verarbeitung von com_ajax
				jQuery('.mod_ajax_result').html('Fehler');
			}
		},
		error :function () {
			// AJAX Aufruf fehlgeschlagen
			jQuery('.mod_ajax_result').html('AJAX Fehler');
		}
	});
}

(function ($) {
	$(document).ready(function(){
		// Klick-Ereigniss auf den Button abfangen und Funktion
		// mod_ajax_send()aufrufen
		$(document).on('click', '.mod_ajax_submit', function () {
			mod_ajax_send();
			return false;
		});
	});
})(jQuery);

Fangen wir zunächst mit dem Ende und einfachsten Teil des Scripts an. Hier wird der Schaltfläche ein onclick Event-Handler zugewiesen der nicht mehr macht als die Funktion mod_ajax_send() aufzurufen.

Die Funktion mod_ajax_send() ist nun der interessante Teil. Zuerst wird das JavaScript Objekt ajax_params erstellt das alle Parameter speichert die wir per AJAX senden. Betrachten wir uns mal die ersten Eigenschaften des Objekts.
option : com_ajax
module: ajax
format: json
Unter ‚option‘ ist com_ajax angegeben. Dies sagt Joomla das die Daten an die Komponente  com_ajax übergeben werden soll das dann die restlichen Daten auswertet. Mit ‚module‘ sagen wir com_ajax welches Modul es aufrufen soll. Hier ist zu beachten das hier nicht der Titel des Modul gemeint ist sondern der Modultyp und dabei das dem Namen vorangestellte „mod_“ weg gelassen werden muss. Aus unserem „mod_ajax“ wird also „ajax“.

Die Kommponente macht nun folgendes: sie nimmt dem Parameter module und fügt an den Anfang des Wertes „mod_“ hinzu. Daraus wird nun der Pfad zur helper.php unseres Moduls erzeugt. In unserem Fall /modules/mod_ajax/helper.php. Diese wird geladen und versucht ein Objekt der Klasse modAjaxHelper zu erzeugen. Der Namesbestandteil Ajax entspricht hier wieder dem übergebenen Parameter. Con diesem Objekt wird die Funktion getAjax() aufgerufen. Diese muss immer so heissen, egal wie euer Modul benannt ist.

Was mit dem Rüchgabewert der Funktion getAjax() geschieht wird mit dem Parameter „format“ gesteuert. Bei uns soll com_ajax die Daten im JSON-Format zurücksenden.

Alle weiteren Eigenschaften des Objekts ajax_params sind die Daten die wir verarbeiten möchten. In unserem einfachen Modul ist es nur „formvalue“. Als nächstes wird nun mit der jQuery Funktion ajax() eine Verbindung zum Server aufgebaut, die Daten gesendet und das Ergebnis empfangen. Wenn alles funktionierte wird der Code unter „success“ ausgeführt und das Ergebniss im Div mit der Klasse „mod_ajax_result“ angezeigt.

Wie gehts weiter

Im nächten Teil schauen wir uns das Modul auf der Server Seite an.

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