Formulare und Ajax
Fluid Formulare per Ajax versenden: pageType, form viewHelper, Ajax Funktion und Formular Validierung.
Ajax Calls über pageType
Die Verwendung eines eigenen page Types für Ajax Calls ist relativ simpel. Zunächst müsst ihr euer Extensionsetup um einen neuen PageType erweitern. Die PageType Nummer muss einmalig in der Installation sein, also ggf. bereits vergebene PageTypes für RSS, Sitemaps, Print & Co beachten.
Extensionsetup - der pageType für Ajax
Bitte beachtet das ihr in der letzten Zeile eure den Extensionnamen ohne 'tx_' Prefix angeben müsst!
ajaxCall = PAGE
ajaxCall {
typeNum = 999
config.disableAllHeaderCode = 1
additionalHeaders = Content-type:application/json
xhtml_cleaning = 0
admPanel = 0
10 = COA
10 < tt_content.list.20.myextension_myplugin
}
Der Link im Fluid Template
Für das Beispiel bauen wir uns eine einfache f.link.action auf:
<f:link.action
action ="myControllerFunction"
pageType = "999"
onclick = "return false"
class = "jqClick"
>
Mein linktext
</f:link.action>
In der Linkaction können wir direkt die PageType mitgeben und über das onklick Event die Ausführung per Javascript verhindern. Der Vorteil ist, das hier der komplette Link von Fluid erzeugt wird den wir im nächsten Schritt per jQuery auslesen. Damit das Beispiel übersichtlich bleibt, arbeiten wir ohne jeden Parameter.
Der AjaxCall in jQuery
$('.jqClick').click(function(e) {
var action = $(this).attr("href");
$.ajax({
url: action,
type: post,
}).done(function (data) {
//Unser Controller Ergebnis ist in der variable "data"
//Einfaches Beispiel: $('.irgendeineKlasse).html(data);
}).fail(function () {
//Irgendwas ist schief gelaufen, hier könnt ihr eine Meldung ausgeben
//Einfaches Beispiel: $('.irgendeineKlasse).html('Ein Fehler ist aufgetreten');
}).always(function () {
//Zuletzt noch der Teil der immer ausgeführt wird.
//Einfaches Beispiel: $('.irgendeineHinweisKlasse).html('Daten wurden verarbeitet');
});
});Ajax Function im Controller
Die Controllerfunction muss natürlich wie jede Action in der ext_localconf.php registriert sein. Innerhalb dieser Action steht euch die ganz normale Extbase Umgebung zur Verfügung, also alles das was ihr in 'normalen' Funktionen auch habt (injected Repositories, mapped Tables, settings etc.) Genau das ist der Unterschied zu einem AjaxCall über eID, das komplette TSFE ist geladen.
Am einfachsten ist sowas immer mit einem statischen Ergebnis testbar, dann habt ihr Gewissheit das die Ajax Funktion läuft.
$result = 'jepp läuft';
return json_encode($result);
Hinweis: sämmtliche Debug Versuche in der Ajax Action führen zwangsläufig zu einem Ajax Error!
Ich hoffe der Artikel halt Euch ein Stück weiter gebracht, ansonsten schaut mal in die nachfolgenden Artikel oder hinterlasst einfach einen Kommentar.
Weitere Artikel zu diesem Thema:
Empfehlenswerte Lektüre:
jQuery: Das Praxisbuch
Ein Arbeitsbuch mit vielen Praxisbeispielen und Hintergrundwissen zu jQuery, jQuery mobile und UI. In einer kurzen Einleitung werden die Basics für Einsteiger erklärt, danach ist das Buch aber für Newbies und Profils gleichermaßen interessant - eine echte Empfehlung für den Alltag.
Kommentare
keine Kommentare vorhanden