Contao 3.1 und Extension simple_ajax – ein Beispiel

Heute geht es um die Extension simple_ajax, die leider nur dürftig kommentiert ist.

Aber es lassen sich alle Infos im Web finden, dauert halt etwas. 🙂

Deshalb hier jetzt eine Beschreibung, wie sich ein Ajax-Zugriff von einer FE-Seite realisieren läßt.

• Die Erweiterung simple_ajax muß natürlich über das Repository installiert werden.
  Im Wurzelverzeichnis der Website finden sich dann diese beiden Dateien:
  SimpleAjax.php
  SimpleAjaxFrontend.php
  Dort steht auch eine Minimalanleitung drin 🙂
• Unter system/modules lege ich jetzt einen neuen Ordner ajaxrequest an.
  Der Name dieses Ordners kann auch beliebig anders lauten
• Unter system/modules/ajaxrequest lege ich einen neuen Ordner config an.
• Unter system/modules/ajaxrequest/config erstelle ich die Datei config.php mit diesem Inhalt:

  <?php
  $GLOBALS['TL_HOOKS']['simpleAjax'][] = array('AjaxRequestClass', 'AjaxRequestMethod'); // Klassenname - Methodenname
  ?>

• Unter system/modules/ajaxrequest erstelle ich die Datei AjaxRequestClass.php, dieser Name muß zum Eintrag in der config.php passen!
  Hier noch der Basisaufbau dieser Datei:

  <?php
  // AjaxRequestClass.php
  class AjaxRequestClass extends System
  	{
  	public function AjaxRequestMethod()
  		{
  		// Zugehörigen Aufruf prüfen, siehe JS-Funktion im FE-Modul
  		if ($this->Input->post('type') == 'ajaxsimple')
  			{
  			$this->import('Database'); // Nötig für Datenbankabfragen
  			// hier kommen die nötigen Funktionalitäten
  			$result['code']="0";
  			$result['msg']="Success";
  			echo json_encode($result);
  			exit;
  			}
  		}
  	}
  ?>

• Im FE nutze ich dann ein passendes Modul, das meinen Javascript-Code enthält (ich nutze hier jQuery). Der Aufruf geschieht über ein div-Element mit id=“knopf“.

  <script type="text/javascript">
  /* <![CDATA[ */
  // jQuery
  (function($)
  	{
  	$(document).ready(function()
  		{
  		$("#knopf").click(function()
  			{
  			$.ajax({
  				type: "POST",
  				url:  "SimpleAjax.php",
  				data: { type: "ajaxsimple" },
  				success: function(result)
  					{
  					tags = $.parseJSON(result);
  					if (tags['code']=="0")   // nur als Beispiel
  						{
  						// benötigte Aktionen
  						alert(tags["msg"]);
  						}
  					}
  				});
  			});
  		});
  	})(jQuery);
  /* ]]> */
  </script>

• Jetzt lasse ich den Autoload-Creator arbeiten, der bindet den obigen Hook in’s System ein, danach sollte alles funktionieren.

Das war’s auch schon.

Ich hoffe mal, ich habe alle Codesegmente richtig kopiert.