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


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.