3.5.x Ajax und Contao

Ajax und Contao

Guten Abend,

Ich müsste eine Aufzählung von Firmen ausgeben die beim erreichen des Endes der Seite nachgeladen werden (Ich denke InfniteScroll macht sowas ist jedoch kommerziell nicht kostenlos und daher uninteressant für dieses Projekt)

Hab nun den ganzen Tag versucht soetwas selbst zu Programmieren und den Die "animation" selbst hab ich nun ... Mir fehlt nur der Ajax Teil. Ich verstehe nicht so ganz wie man diesen Mit contao verbinden.

Ich will jedes mal wenn etwas passiert (ende der Seite wird erreicht) 5 weitere einträge aus der tl_firma laden und ausgeben.

Hierfür brauche ich eine erweiterung wie simpleAjax - richtig? Wie würde dann die Syntax aussehen? wo Schreibe ich die Datenbankabfrage rein? (da die Datei ja von SimpleAjax zur verfügung gestellt wird, richtig?)

Sry bin im moment etwas verwirrt und ich denke ich verstehe nur das Grundprinzip nicht. Wäre sehr dankbar über hilfe.

Ho!

du brauchst simpleAjax nicht zwingend. Du kannst ja Javascript einfach ein Request an die Index-Route senden, in jQuery z.B.:

PHP-Code:

$.ajax({     url: '/',     method: 'GET',     data: {         action: 'loadMyCompanies',         lastId: 'Letzte ID die angezeigt wird'     },     success: function(response) {         // do something with response     } })

Dann erstellst du dir ein Modul, in der Config fängst du den Request ab:

PHP-Code:

if(Input::get('loadMyCompanies') == 1) {     $GLOBALS['TL_HOOKS']['initializeSystem'][] = array('MyCompanies', 'getCompanies'); }

Du erstellst eine Klasse class MyCompanies mit der Methode getCompanies:

PHP-Code:

class MyCompanies {     public function getCompanies(){         $lastId = \Input::get('lastId');         // SQL (SELECT * FROM tablename WHERE id > ? LIMIT 5)         // Aufbereitung / Foreach / Template         // echo HTML         die(); // damit Contao nicht weiter lädt :)     } }

Falls du Infos zur Modul-Entwicklung für Contao 3 brauchst, kann dir evt. mein C3 DummyBundle helfen https://github.com/Sioweb/Contao3DummyBundle

Response wird direkt im Template ausgegeben

Hallo Sioweb,

ich bin etwas ratlos bzgl. Contao und Ajax. Ich habe schon diverse Sachen mit Ajax ohne Contao programmiert, was immer ziemlich simpel funktioniert hat. Mit Contao funktioniert das aber leider nicht so.

Folgendes Ziel habe ich: Ich habe eine Extension entwickelt, die eine Member-Liste ausgibt. Bei jedem Member-Profil wird ein Link zu einer Website angezeigt. Diese Links sollen für eine Statistik gezählt werden. Bei Klick wird also ein Ajax-Request ausgeführt, der dann einen Counter in der Datenbank erhöht. Die aktuelle Zahl soll dann eigentlich per Ajax zurückgeliefert werden, einfach per echo.
Leider wird aber der Counter nicht an Ajax zurückgegeben, sondern einfach im Template ausgegeben?!

Ich habe Deine Vorlage dafür verwendet. Wenn ich allerdings z. B. das "die()" im PHP-Code angebe, wird das Template gar nicht erst ausgegeben, die Seite bleibt weiß. Wenn ich den Counter per "echo $counter" zurückliefern will, wird er einfach im Template ausgegeben, Ajax liefert eine "Fail".

Ich hatte mir dann ein anderes Beispiel als Vorlage genommen: https://blog.axxg.de/einfuehrung-aja...art/#more-2241. Das Beispiel ohne Contao umgesetzt funktioniert einwandfrei. In Contao eingebaut wieder dasselbe Problem. Der Response wird einfach ausgegeben.

Wo ist da der Denkfehler, bzw. wie gibt man die Werte innerhab eines Contao-Templates an Ajax zurück?

Würde mir sehr weiterhelfen. Danke schon mal!

Wäre für diesen Zweck nicht bspw. bugbuster/contao-visitors-bundle besser geeignet?

Zitat:

Zitat von Spooky

Wäre für diesen Zweck nicht bspw. bugbuster/contao-visitors-bundle besser geeignet?

Nicht wirklich. Ich möchte ja nicht die Besucher der Website zählen, sondern die Klicks auf externe Links. Wie gesagt, ich habe das außerhalb von Contao schon x-mal gemacht und bin mit Ajax im Prinzip gut vertraut. Aber igendwie funktioniert das bei Contao offenbar ganz anders.

Es handelt sich übrigens um einen Contao 3 Extension (system/modules) innerhalb von Contao 4, was im Grunde auch immer problemlos funktioniert. Hatte noch keine Zeit, mich in die neuen Gegebenheiten der Extension-Entwicklung für Contao 4 einzuarbeiten, ist ja doch so einiges anders.

Interessant ist ja übrigens, dass der Ajax-Call komplett ausgeführt wird inkl. Schreiben in die Datenbank etc. Nur der Response kommt nicht zurück?! Das heißt, das Routing funktioniert mit dem Hook etc., nur die Rückgabe kriege ich nicht, die wird einfach auf der Website als Text ausgegeben.

Ohne deinen Code und Link zu kennen, kann ich nicht helfen.

Zitat:

Zitat von Spooky

Ohne deinen Code und Link zu kennen, kann ich nicht helfen.

Ich hab den Code mal auf das Nötigste zusammengedampft. Der Result-Code wird einfach auf der Website angezeigt. ajax.fail und ajax.always werden in der Console ausgegeben.

Template MemberProfileDetails.html5

Code:

<script> function ajax_website_clicks(member_id) { $.ajax( { url: '/', method: 'POST', data: { action: 'ajaxIncWebsiteClicks', memberId: member_id }, success: function(response) { console.log(response); } }).done ( function () { console.log('SUCCESS'); } ).fail ( function (msg) { console.log('FAIL'); } ).always ( function (msg) { console.log('ALWAYS'); } ); }// end ajax_website_clicks() </script>

config.php

PHP-Code:

<?php $GLOBALS['TL_HOOKS']['initializeSystem'][] = array('classVerzeichnisStatistik', 'funcIncWebsiteClicks'); ?>

classVerzeichnisStatistik.php

PHP-Code:

class classVerzeichnisStatistik { public function funcIncWebsiteClicks() { $member_id = \Input::post('memberId'); if($member_id) { // DB-Operationen ... funktioniert. } // Ajax Result-Dummy $result = Array("ergebnis","<div class='ajax_output'>Test</div>"); echo json_encode($result); }// end funcIncWebsiteClicks() }// end classVerzeichnisStatistik

Zitat:

Zitat von Sitting Bull

ajax.fail und ajax.always werden in der Console ausgegeben.

Dann sieh' dir doch einfach in der Entwicklerkonsole des Browsers an, was schief läuft.

Was mir auffällit: du möchtest einen POST Request machen, schickst aber keinen Request Token mit. Sofern du den Request Token Check nicht deaktiviert hast, wird dir Contao hier einen Fehler werfen (und das solltest du eben in der Entwicklerkonsole des Browsers sehen).

Zitat:

Zitat von Sitting Bull

classVerzeichnisStatistik.php

PHP-Code:

class classVerzeichnisStatistik { public function funcIncWebsiteClicks() { $member_id = \Input::post('memberId'); if($member_id) { // DB-Operationen ... funktioniert. } // Ajax Result-Dummy $result = Array("ergebnis","<div class='ajax_output'>Test</div>"); echo json_encode($result); }// end funcIncWebsiteClicks() }// end classVerzeichnisStatistik

So sendet man keinen Response.

Das wäre eher so:

PHP-Code:

(new JsonResponse($result))->send(); exit;

Besser wäre jedoch, wenn du eine eigene Route für deine AJAX Operation machst (es sei denn du benötigst den Front End Context der jeweiligen Seite).

Zitat:

Zitat von Sitting Bull

config.php

PHP-Code:

<?php $GLOBALS['TL_HOOKS']['initializeSystem'][] = array('classVerzeichnisStatistik', 'funcIncWebsiteClicks'); ?>

Halte dich an PSR-12. Einen schließenden PHP Tag solltest du in PHP Dateien nicht machen.

Zitat:

Zitat von Spooky

So sendet man keinen Response.

Das wäre eher so:

PHP-Code:

(new JsonResponse($result))->send(); exit;

Das erzeugt bei mir folgende Ausgabe auf dem Screen. Die Contao-Seite wird gar nicht geladen, nur JSON-Output?!

Code:

1: "ergebnis" 2: "<div class='ajax_output'>Test</div>"

Besser wäre jedoch, wenn du eine eigene Route für deine AJAX Operation machst (es sei denn du benötigst den Front End Context der jeweiligen Seite).

Das mit den Routen verstehe ich eben noch nicht, keine Ahnung wie das geht ;-(

Keine Fehler in der Konsole

Zitat:

Zitat von Spooky

Dann sieh' dir doch einfach in der Entwicklerkonsole des Browsers an, was schief läuft.

In der Konsole werden nur "FAIL" und "ALWAYS" ausgegeben, sonst nichts.

Zitat:

Zitat von Spooky

Was mir auffällit: du möchtest einen POST Request machen, schickst aber keinen Request Token mit. Sofern du den Request Token Check nicht deaktiviert hast, wird dir Contao hier einen Fehler werfen (und das solltest du eben in der Entwicklerkonsole des Browsers sehen).

Wie schickt man ein Requets Token? Habe ich bisher nie bei einer Extension gebraucht.

Ich meine nicht die Konsole sondern den Netzwerk Tab der Developer Tools deines Browsers.

Request Tokens musst du auch in Contao 3 für POST Requests mit schicken.

[QUOTE=Spooky;516620]Ich meine nicht die Konsole sondern den Netzwerk Tab der Developer Tools deines Browsers.

Netzwerk-Tab sagt:

Code:

Status: 301 Methode: GET (habe ich von POST auf GET umgestellt, dann brauche ich kein Token, oder?) Datei: /?action=ajaxIncWebsiteClicks&memberId=6 Ursprung: xhr Typ: html Status: 302 Methode: GET (habe ich von POST auf GET umgestellt, dann brauche ich kein Token, oder?) Datei: /de/?action=ajaxIncWebsiteClicks&memberId=6 Ursprung: xhr Typ: html

Sieht aus meiner Sicht alles perfekt aus?!

Nein ;). Du kannst außerdem noch mehr analysieren im Netzwerk Tab der Developer Konsole deines Browsers. Du kannst dir dort alle Request Header sowie alle Response Header ansehen und auch den tatsächlichen Response Body.

Deine Methode mit dem initializeSystem Hook funktioniert nicht (zumindest nicht ohne weiteres), vor allem nicht in neueren Contao Versionen. Der initializeSystem Hook ist zu spät - Contao führt vorher schon eigenes, dynamisches Routing aus und redirected die URL daher bspw. auf /de/ in deinem Fall. Und dort passiert dann aus irgend einem Grund zusätzlich noch ein 302 Redirect.

Wie gesagt, du solltest lieber eine Action mit Route verwenden.

» https://docs.contao.org/dev/getting-...g-development/

Zitat:

Zitat von Spooky

Nein ;). Du kannst außerdem noch mehr analysieren im Netzwerk Tab der Developer Konsole deines Browsers. Du kannst dir dort alle Request Header sowie alle Response Header ansehen und auch den tatsächlichen Response Body.

Anfrage Header:

Zitat:

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
X-Requested-With: XMLHttpRequest
Referer: https://.../de/profile-details.html?id=6&cn=SCGFXYUTAP6
DNT: 1
Connection: keep-alive
Cookie: cookieconsent_status=dismiss; csrf_https-contao_csrf_token=uEtlOBmxjc0JLTj2kvarloxCqBx13FwQ DM8tPbpYgTI

Antwort Header:

Zitat:

HTTP/2.0 302 Found
date: Sat, 21 Dec 2019 15:27:39 GMT
server: Apache
x-ajax-location: https://.../de/welcome.html
cache-control: private
x-powered-by: PHP/7.3.13
referrer-policy: no-referrer-when-downgrade, strict-origin-when-cross-origin
contao-cache: miss
content-encoding: gzip
vary: Accept-Encoding
cache-control: max-age=500
expires: Sat, 21 Dec 2019 15:35:59 GMT
content-type: text/html; charset=UTF-8
X-Firefox-Spdy: h2

Deine Methode mit dem initializeSystem Hook funktioniert nicht (zumindest nicht ohne weiteres), vor allem nicht in neueren Contao Versionen. Der initializeSystem Hook ist zu spät - Contao führt vorher schon eigenes, dynamisches Routing aus und redirected die URL daher bspw. auf /de/ in deinem Fall. Und dort passiert dann aus irgend einem Grund zusätzlich noch ein 302 Redirect.

Wie gesagt, du solltest lieber eine Action mit Route verwenden.

» https://docs.contao.org/dev/getting-...g-development/[/QUOTE]

OK, werde ich mal studieren.

Mal ne andere Frage: Was nimmst Du für eine kleine Basis-Extension, die einfach nur einen Ajax-Request sendet und den Response auswertet? Würde ich Dir gern in Auftrag geben, könnte ich sicher öfter gebrauchen. Sollte einfach in system/modules eingespielt werden können.

system/modules ist deprecated und für sowas brauchst du keine Extension. Einfach nur eine Route.

Zitat:

Zitat von Spooky

system/modules ist deprecated und für sowas brauchst du keine Extension. Einfach nur eine Route.

Ja, das ist natürlich nicht der Königsweg, würde mich aber erst einmal weiterbringen. Außerdem soll die Extension ja langfristig einiges mehr machen. Ich weiß nur auch nach endlosen Recherchen nicht, wie man da ran geht.

1. Keine Ahnung, wie das mit den Routen funktioniert.
2. Keine Ahnung wie man eine COntao 4 Extension baut. Habe gefühlt schon Wochen damit verbracht, das herauszufinden. Leider findet man immer nur Bruchstücke, bei denen immer entscheidende Infos fehlen.
3. Kann man eine Contao 4 Extension überhaupt ohne composer etc. ins System einspielen, so wie das bei Contao 3 der Fall war? Ich habe nicht überall composer-Zugang. In Contao 3 ging das eben einfach durch Einspielen ins system/modues Verzeichnis, dann ggf. install aufrufen, fertig. So bräuchte ich das möglichst auch für Contao 4?!
4. Gibt es irgendwo ein möglichst lückenloses Schritt-für-Schritt-Tutorial, wie man eine Contao 4 Extension für den Eigengebrauch (ohne Git etc.) entwickeln und einbinden kann?
5. Existiert vielleicht irgendwo eine kleine Basis-Extension, auf der man seine eigenen Extensions aufbauen kann?

Wäre dankbar für alle Hinweise, die zur Ergreifung des Tätes führen ;-)

Hast du dir die Dokumentation schon angesehen?