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.

Dieser Beitrag wurde unter IT-Technik abgelegt und mit , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.