Mit contao-ajax_reload_element Content Elemente per Ajax laden

[dirksche]

Hallo liebe Community,

ich teste gerade mit Contao 4.4 die Erweiterung contao-ajax_reload_element. Ich schaffe es allerdings nicht, den Inhalt eines Inhaltselements per Klick nachzuladen. Könnt ihr mir einen Tipp geben?
Mein Script sieht derzeit so aus:

<script>
    $("#myBtn").click(function (event) {

        event.preventDefault();
        
        $.ajax({
            method: 'POST',
            url: location.href,
            data: {
                ajax_reload_element: element.attr('data-ajax-reload-element'),
                element: 'ce::88',
                page: <?= $GLOBALS['objPage']->id ?>
            }
        })
		.done(function (response, status, xhr) {
                if ('ok' === response.status) {
                    // Replace the DOM
                    $('.tnb').replaceWith(response.html);
                }
                else {
                    // Reload the page as fallback
                    location.reload();
                }
            });
    });
</script>

Also mit Klick auf den Button (#myBtn) soll der Inhalt des Inhaltselements mit der ID 88 in das DIV mit der Klasse tnb geladen werden.

Grüße,
Dirk

[tl_richard_user]

Hallo dirksche,

1. Die beiden Parameter

element: 'ce::88', page: <?= $GLOBALS['objPage']->id ?>

kannst du löschen, die werden nicht mehr verwenden.
2.

// The data- attribute is set automatically
                ajax_reload_element: element.attr('data-ajax-reload-element')

Hier sollte dann

ajax_reload_element: 'ce::88'

setehen
3. Schaue, dass bei dem Content Element mit der ID 88 das Häkchen "allowAjaxRelaod" gesetzt ist (bzw. schau in der Datenbank nach)
4. wenn du nun JavaScript-Probleme bekommst, kannst du die debuggen, in dem du in den Browser-Dev-Tools hier https://github.com/richardhj/contao-...ad-form.js#L31 und hier https://github.com/richardhj/contao-...ad-form.js#L47 einen Breakpoint setzt und dir die Response/den Status-Code anschaust.

[dirksche]

Hi Richard,

vielen Dank für die Hilfe. Hat nun funktioniert :-)

Grüße,
Dirk

[Kahru]

Hallo

ich krame das Thema mal wieder hinten vor denn ich benötige das als Denkanstoss für ein internes 3.5-Projekt das mit simlpeajax gemacht war.

Wenn ich mir Richards Bundle via Manager installiere funktioniert das Ajax wie gewünscht. Nehme ich das Projekt lokal auf src und will das händisch in die Managed einbinden dann funktioniert alles bis zum Aufruf des Ajax im Javascript. Das Ajax wird dann nicht ausgeführt. Dito passiert bei meinem eigenen Ajax-Projekt ... Hat da jemand einen Denkanstoss für mich woran das liegen könnte?

Bernard

[Spooky]

Was genau meinst du mit "das AJAX wird nicht ausgeführt"? Wird das JavaScript tatsächlich nicht ausgeführt? Dann musst du dein JavaScript debuggen. Wird der Request abgesetzt, aber es kommt nicht der erwartete Response? Dann musst du genauere Angaben zum Response machen.

[Kahru]

Hi Spooky,

ich habe das Script von dirk etwas ergänzt zum Testen

<script>
    $("#myBtn").click(function (event) {

        event.preventDefault();
        alert("inside onclick");
        
        $.ajax({
            method: 'POST',
            url: location.href,
            data: {
            	ajax_reload_element: 'ce::2'
            }
        })
		.done(function (response, status, xhr) {
			    alert("done");
                if ('ok' === response.status) {
                    // Replace the DOM
                    alert("ok");
                    $('.tnb').replaceWith(response.html);
                }
                else {
                    // Reload the page as fallback
                    alert("fallback");
                    location.reload();
                }
            });
    });
</script>

Am 1 Alert komme ich vorbei. Die beiden anderen werden nicht aufgefrufen. Also würde er lokal das $.ajax nicht ausführen. Also irgendwie verwirrt mich das Ganze noch

[Spooky]

Die anderen Alerts würden ja nur kommen, wenn der Request erfolgreich ist. Benutze den Netzwerk Tab der Dev Tools.

[Kahru]

DevTools wirft auf der lokal installierten Extension contao-ajax_reload_element einen 500er Fehler. Die andere via Manager installierte macht das nicht.

Zur Info: Ich benutze für den Test 2 frisch installierte 4.4er Versionen lokal unter Xampp. Die sind bis auf 3 Testartikel völlig nackt.

und Edit sagt: Wenn ich ein .fail ins Ajax einfüge dann kommt undefined. Die Class scheint aber korrekt da zu sein

[iosis101]

gibt es auch die Möglichkeit im Contentelement welches ich nachlade die Postvariable X auszulesen?

Ich habe es mit dieser Erweiterung geschafft ein Textelement nachzuladen. Ich möchte aber gerne für ein Projekt Kommentare eines Nutzers nachladen. Je nachdem welche ID ich per Post dem Ajaxrequest mitgebe sollen dann die Kommentare ausgegeben werden.
Leider ist es mir nicht gelungen im ce_text template welches nachgeladen wurde die Postvariable auszugeben.

//echo \Input:ost('test');

Eine weitere Idee war es nun das Absenden des Ajax-Formulars per Hook abzufangen und die Kommentare über den Hook zu laden.

[Kahru]

Ich antworte erst mal auf mein eigenes Problem das mittlerweile gelöst ist:
Also in C4.4 muss die ContaoManagerPlugin.php bei privaten Bundles zwingend in das Verzeichnis {root}/app damit er die Route korrekt einbindet. Ich hatte für "normale" Bundels ohne Routen bisher aus Ordnungsgründen in {root}/src/ContaoManager/ abgelegt.

@iosis101: Klar geht das. Du musst in Deinem Controller-Modul halt die Daten der Datenbank nachladen und das Result via JsonResponse und send zurückgeben

[iosis101]

Um ehrlich zu sein, weiß ich nicht warum ich etwas in einem Controller Modul schreiben muss. Ich habe damit noch nie gearbeitet. Ich suche seit Tagen nach einem guten Tutorial zum Thema ajax: Daten nachladen in C4. Gibt es da was, was ich übersehe?

[Kahru]

Doku ist kaum zu finden. Ich hab mir auf Github ein paar Extensions bzw. Versuche angesehen und die als private Bundles nachvollzogen. Meine Extension ist hauptsächlich abgeleitet aus contao-ajax_reload_element und dem (ja leider abgekündigten) contao-simple-ajax