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.