jim superfly

Dieser Artikel beschreibt das Prinzip von eID anhand eines Mini-Tutorials für ein Mini-Ajax-Formular zum Absenden einer Mini-Email.

CMS-Monster, wie TYPO3, rödeln beim Frontend-Rendering ziemlich viel herum, bis die Seite dargestellt wird. Manchmal bietet es sich daher an, für eine schnelle Datenabfrage kein Neuladen der Seite zu erzwingen. Hierfür steht Ajax zur Verfügung, das via JavaScript einen direkten und raschen Datenaustausch erlaubt.
Um den nativen Prozess des Frontend-Renderings zu umgehen, kommt unter TYPO3 extensionID (eID) zum Einsatz. Das Prinzip dahinter ist einfach wie genial: Der Rendering-Prozess wird frühzeitig gestoppt und an ein beliebiges Extension-Script übergeben. Die Zuweisung erfolgt mit Hilfe eines Schlüssels: Der extensionID.

Die Registrierung und Schlüssel-Zuweisung der jeweiligen Extension, findet in der localconf.php oder ext_localconf.php statt:

$TYPO3_CONF_VARS['FE']['eID_include']['script'] = 'EXT:example/script.php';

Fügt man einem Link den Parameter eID=script hinzu (z.B. “index.php?id=1&…&eID=script”), wird der Rendering-Prozess an die Datei script.php der Extension example übergeben. Beinhaltet die script.php ein “Hello World!”, wird dieses daraufhin auf einer weißen Seite ausgegeben.
Für die Box-Darstellung des Email-Formulars, kann man nun zum Beispiel das jQuery-Plugin Thickbox einbinden, wodurch unser externes “Hello World!” nach einem Klick auf den Link direkt in der Thickbox erscheint, ohne dass die Seite dabei neu geladen erscheint.

Das Email-Formular aus der script.php kann wie folgt aussehen:

<form id="mailform" method="post" onSubmit="return false">
	<label>Email:</label>
	<input id="email" name="email" type="text" />
 
	<label>Nachricht:</label>
	<textarea id="message" cols="21" rows="5" name="message"></textarea>
 
	<input id="submit" type="submit" value="Absenden" />
</form>

Besonders wichtig ist das Form-Attribut onSubmit=”return false”. Dieses bewirkt, dass der Ajax-Response eines Submits weiterhin in der Thickbox ausgegeben wird und nicht auf einer weißen Seite. Bevor ein Submit durchgeführt werden kann, sollte die Eingabe validiert werden. Hierfür reicht ein kleines jQuery Script aus, das neben der Validierung und Fehlerbenachrichtigung auch ein paar Animationen bereitstellt:

$(document).ready(function(){
	$("#submit").click(function(){
		$(".err").hide();
		var Error = false;
		var emailRegEx = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
 
		var emailVal = $("#email").val();
		if(emailVal == '') {
			$("#email").after('<span class="err">Bitte geben Sie eine Email-Adresse an.</span>');
			Error = true;
		} else if(!emailRegEx.test(emailVal)) {
			$("#email").after('<span class="err">Bitte geben Sie eine valide Email-Adresse an.</span>');
			Error = true;
		}
 
		var messageVal = $("#message").val();
		if(messageVal == '') {
			$("#message").after('<span class="err">Bitte geben Sie eine Nachricht ein.</span>');
			Error = true;
		}
 
		if(Error == false) {
			$.post("index.php?eID=script",
	   		{ email: emailVal, message: messageVal },
	   		function(data){
	   			$("#mailform").fadeOut("normal", function() {
	   				$("#mailform").before(data);
	   			});
   			});
		}
	});
});

Sobald ein Fehler eintritt, wird die Fehlernachricht am entsprechenden Feld erzeugt und der Submit abgebrochen. Ist dies nicht der Fall, wird der Submit via POST durchgeführt (URL beachten), das Formular ausgeblendet (fadeOut) und der Ajax-Response in der Thickbox ausgegeben. Dieser befindet sich nachwievor in der script.php und berichtet via echo, ob die Email erfolgreich abgeschickt wurde:

if (!defined ('PATH_typo3conf')) die ('Could not access this script directly!');
require_once(PATH_tslib.'class.tslib_pibase.php');
 
class mailer extends tslib_pibase {
 
     function sendMail(){
 
  	  $post = t3lib_div::_POST();
          if (!empty($post)) {
 
	        $subject = 'Eine neue Nachricht';
		$headers .= "MIME-Version: 1.0\r\n";
		$headers .= "Content-type: text/plain; charset=utf-8\r\n";
		$headers .= "Content-Transfer-Encoding: 8bit\r\n";  
 
		$mail = mail($post['email'], $subject, $post['message'], $headers);
 
		if($mail === true) {
            	    echo 'Danke für Ihre Nachricht';
		} else {
            	    echo 'Leider ist beim Versenden der Nachricht ein Fehler aufgetreten.';
      	        }
      		exit (0);
          }
     }
}
 
$mailer = t3lib_div::makeInstance('mailer');
$mailer->sendMail();

Die Vererbung der Elternklasse tslip_pibase an unsere Klasse mailer ist für dieses Beispiel nicht notwendig aber dennoch möglich, falls der Funktionsumfang eines echten Frontend-Plugins benötigt wird.

Quellen:

Ajax Forms with jQuery
Asynchrone Datenübertragung zwischen TYPO3 und jQuery

Jim