TYPO3 CMS Extbase Ajax Aufruf als HTML oder JSON

Realisierung eines Ajax Requests in einer TYPO3 CMS Extbase Extension über typeNum.
Ausgeliefert wird eine HTML View. Das Setup sieht aber teilweise auch die Verwendung von JSON vor.
Alle in Uppercase definierten Einträge müssen für die eigene Verwendung entsprechend ausgetauscht werden.

Zunächst werden die Einträge in der constants.txt vorgenommen.
Die Einträge in den Konstanten festlegen ist eher optional zu betrachten.
Sofern dieser Eintrag nicht verwendet wird, müssen die hier gesetzten Parameter
direkt in der setup.txt durch die constanten Deklaration ausgetauscht werden.

  
plugin.app {
  settings {
    # cat=plugin.tx_app//a; type=string; label=typeNum ANYNAME for AJAX
    typeNumANY = 1421771406
    # cat=plugin.tx_app//b; type=string; label=typeNum OTHERNAME for AJAX
    typeNumOTHER = 1421771407
    # cat=plugin.tx_app//a; type=string; label=pageUid for AJAX
    pageUid = 1337 // Use your page id where the plugin is set
  }
}

Einträge in der setup.txt
Zunächst wird ein Standard Eintrag gesetzt, der entsprechend überschrieben werden kann.
Die Namen ANYNAME oder OTHERNAME können frei gewählt werden, da diese keine weitere Relevanz haben.

  
plugin.app {
  settings {
    pageUid = {$plugin.tx_app.settings.pageUid}
  }
}

lib.AJAXPrototype = PAGE
lib.AJAXPrototype {
  typeNum = 0
  config {
    disableAllHeaderCode = 1
    additionalHeaders = Content-type:application/html
    xhtml_cleaning = 0
    debug = 0
    no_cache = 1
    admPanel = 0
  }
}


#Die entsprechenden Felder aus dem Standard Eintrag anpassen.
ANYNAME < lib.AJAXPrototype
ANYNAME {
  typeNum = {$plugin.tx_app.settings.typeNumANY}
  10 < tt_content.list.20.app_pi1
}

OTHERNAME < lib.AJAXPrototype
OTHERNAME {
  typeNum = {$plugin.app.settings.typeNumOTHER}
  config {
    additionalHeaders = Content-Type: application/json
  }
  10 < tt_content.list.20.app_pi2
}

Als Beispiel wir der Aufruf einer HTML View verwendet.
Eingesetzt wird eine Selectbox, die bei einer Auswahl einen Ajax Call auslöst und das Ergebnis einblendet.
Für eine Ausgabe im Format JSON, muss dies in der Action entsprechend aufbereitet werden.
Das result, welches dann in der View als JSON ankommt, muss durch eine Javascript Funktion verarbeitet werden.
Ein Beispiel dazu werde ich nachreichen.

  

	
	
	
	
	

Das dazugehörige Javascript mit Abhängigkeit zu jQuery sieht wie folgt aus.

  
(function ($) {
  $(function () {
    "use strict";
    var service = {
      AJAXACTIONNAME: function (data) {
        $.ajax({
          url: "index.php",
          data: data.serialize(),
          success: function (result) {
            $('#result').html(result).fadeIn('slow');
          },
          error: function (jqXHR, textStatus, errorThrow) {
            /* TODO */
          }
        });
      },
    };
    $('#FORMID').submit(function (ev) {
      ev.preventDefault();
      service.AJAXACTIONNAME($(this));
    });
    $(".SELECTCLASS").on('change', function () {
      $('#result').fadeOut();
      $('#FORMID').submit();
    });
  });
})(jQuery);

Die Anwendung von Ajax Requests ist in TYPO3 CMS Extbase sehr übersichtlich. Wichtig ist, die pageId zu transportieren. Wird die pageId nicht als Parameter (id) übergeben, findet der Aufruf auf der Startseite statt.
Ist das Plugin dort nicht integriert, führt der Aufruf zu einer Fehlermeldung oder zu einem ungewünschtem Ergebnis.