contao-ajax_reload_element richtig einbinden

[bongartz120]

Hallo zusammen,

ich versuche gerade Module bzw. Elemente aus einen Artikel mittels Ajax nach zu laden. Dazu benutzte ich folgende Erweiterung "contao-ajax_reload_element". Ich habe ein Element erstellt und bei diesem den Harken bei "Ajax-Relaod erlauben" gesetzt. Zu dem habe ich folgendes Skript unter dem Seitenlayout bei jQuery mit eingebunden.

j_ajax.html5

<script>
    $(".mod_my_module a.reloadThisElementOnClick").click(function (event) {

        // Don't follow the link
        event.preventDefault();

        // Var containing the elements div container like ".mod_my_module"
        var element = $(this).closest('[class^="ce_"],[class^="mod_"]');
        // Add a css class to this element. An overlay and spinning icon can be set via css
        element.addClass('ajax-reload-element-overlay');

        $.ajax({
            method: 'GET',
            url: 'SimpleAjaxFrontend.php',
            data: {
                action: 'reload-element',
                // The data- attribute is set automatically
                element: element.attr('data-ajax-reload-element'),
                // Some elements use an auto_item to fetch particular content. The auto_item will automatically set in a data- attribute
                auto_item: (typeof element.attr('data-ajax-reload-auto-item') != typeof undefined) ? element.attr('data-ajax-reload-auto-item') : '',
                // A page id can be set optionally. Necessary for elements that work with different language files
                page: <?= $GLOBALS['objPage']->id ?>
            }
        })
            .done(function (response, status, xhr) {

                if (response.status == 'ok') {
                    // Replace the DOM
                    element.replaceWith(response.html);
                }
                else {
                    // Reload the page as fallback
                    location.reload();
                }
            });
    });
</script>

Das ich hier natürlich gerade keinen passenden Link auf der Site habe weiß ich. Was mich jetzt aber verwundert, dass die Inhalte welche mittels Ajax nachgeladen werden sollten angezeigt werden. Ich dachte ich müsste erst das Skript ausführen über ein Click-Event.

Ich denke das ich noch irgendwas falsch mache.

Contao Installation ist 3.5.19 und Extension ist 1.0.2 mittels Composer installiert.

Anbei der Link zu meiner Test Seite: Link

Vielen Dank vorab für Eure Unterstützung :-)

Grüße

Andre

[tl_richard_user]

Was mich jetzt aber verwundert, dass die Inhalte welche mittels Ajax nachgeladen werden sollten angezeigt werden. Ich dachte ich müsste erst das Skript ausführen über ein Click-Event.

das liegt daran, weil du das Element, welches du eigentlich nachladen möchtest, im Artikel eingebunden hast. Also: Element nicht einbinden und JS anpassen. Dein JS passt ja auch nicht, weil zB. der Selector falsch ist. Außerdem ist das Skript, welches du aus der Beschreibung genommen hast, dafür gedacht, um ein bereits eingebundenes Element neuzuladen, nicht nachzuladen

[bongartz120]

Ok Danke.

Da die Doku leider was mager ist. Was für ein Skript muss ich nutzen um es nach zu laden. Wo muss ich die Content-Elemante erstellen? Mache ich dafür eine Seite die nicht in der Seitenstrutur oder versteck ist?

Das das Click Event in dem Beispiel Code nicht geht weiß ich.

Habe nach langem Testen nur den Fehler bekommen, dass das Skript nicht weiß ob es ein Modul oder ein Content ist.

[tl_richard_user]

Du kannst etwas JavaScript?
Hier mal die angepasste jQuery-Variante, ungetestet

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

        // Don't follow the link
        event.preventDefault();

        $.ajax({
            method: 'GET',
            url: 'SimpleAjaxFrontend.php',
            data: {
                action: 'reload-element',
                element: 'mod::2', // steht für modul id 2 // ce::2 steht für content element id 2
                page: <?= $GLOBALS['objPage']->id ?>
            }
        })
            .done(function (response, status, xhr) {

                if (response.status == 'ok') {
                    // Replace the DOM
                    $('#inhalt').replaceWith(response.html);
                }
                else {
                    // Reload the page as fallback
                    location.reload();
                }
            });
    });
</script>

[bongartz120]

Ja jQuery kann ich :-)

Ist das mit dem fest zugeordneten Modul jetzt nur für mich? Ober läuft die Erweiterung immer so, dass ich explizit angeben muss welchen Inhalt ich laden will?

Was für einen Mehrwert hat dann der Harken im BE?

[bongartz120]

So ich habe jetzt mal was getestet. Also wenn ich ein Modul nehme von Typ "html" und hier nur html verwende, lauf es super. Wenn ich je doch in dem Modul einen InsertTag verwende wird nicht mehr ausgegeben.

{{insert_article::1}}

Mache ich hier etwas falsch oder habe ich hier einen zu großen Denkfehler?

[tl_richard_user]

Ist das mit dem fest zugeordneten Modul jetzt nur für mich? Ober läuft die Erweiterung immer so, dass ich explizit angeben muss welchen Inhalt ich laden will?

Du musst angeben, welches Modul oder welches CE du laden möchtest.

Was für einen Mehrwert hat dann der Harken im BE?

Wenn der Haken nicht da wäre und du dich nicht dafür entscheiden würdest, dass du das Element über die Erweiterung nachladen möchtest - dann könnte jeder jedes Element, welches in Contao existiert, auch ggf. geschützte Elemente aus dem Mitgliederbereich, ansehen, in dem er ein Request nachbaut.

So ich habe jetzt mal was getestet. Also wenn ich ein Modul nehme von Typ "html" und hier nur html verwende, lauf es super. Wenn ich je doch in dem Modul einen InsertTag verwende wird nicht mehr ausgegeben.

Es kann sein, dass das Ersetzen der InsertTags in Contao vorgenommen wird, nachdem das Modul geparsed wird und bevor es zum Browser ausgegeben wird. Das deckt dann die Erweiterung wohl nicht ab.
Aber dann versuch doch nicht, ein HTML-Element nachzuladen sondern eben das Element, was du gezielt haben willst?

[bongartz120]

Ich habe mir die Elemente in einen Artikel geladen und hol mir dann den ganzen Artikel. Es hier hier um 5 Elemente.

Wenn ich jetzt mehr als eins auf einmal haben will, kann ich hier auch mehrere angeben oder muss ich für jedes Element eine Abfrage erstellen?

[tl_richard_user]

Ich habe eine neue Version der Erweiterung veröffentlicht, die die InsertTags ersetzt.

[bongartz120]

Cool Danke.

Werde es direkt mal testen :-)

[dirksche]

Ich würde gerne den Inhalt eines Div's alle 5 Sekunden automatisch aktualisieren.
Wie müsste ich folgenden Code anpassen, um ein Auto Refresh alle 5 Sekunden zu definieren:

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

        // Don't follow the link
        event.preventDefault();

        $.ajax({
            method: 'GET',
            url: 'SimpleAjaxFrontend.php',
            data: {
                action: 'reload-element',
                element: 'ce::2', // steht für modul id 2 // ce::2 steht für content element id 2
                page: <?= $GLOBALS['objPage']->id ?>
            }
        })
            .done(function (response, status, xhr) {

                if (response.status == 'ok') {
                    $('.tnb').replaceWith(response.html);
                }
                else {
                    // Reload the page as fallback
                    location.reload();
                }
            });
    });
</script>

LG,
Dirk

[Spooky]

Dafür hätte ich eine andere Extension

https://github.com/fritzmg/contao-lazy-load-element

Wobei damit das Inhaltselement auch erst lazy geloadet wird.

[dirksche]

Cool, die Erweiterung kannte ich noch gar nicht. Allerdings ist des durch den lazy Load in diesem Fall für mich unbrauchbar. Es handelt sich um eine Art Status Anzeige die ständig aktualisiert werden muss.

[Spooky]

Dann zB so:

<script>
(function($)
{
    "use strict";
    $(document).ready(function()
    {
        var interval = setInterval(function()
        {
            $('[data-ajax-reload-element]').each(function()
            {
                var $element = $(this);
                $.get('SimpleAjaxFrontend.php', {
                    action: 'reload-element',
                    element: $element.data('ajax-reload-element'),
                    auto_item: (typeof $element.data('ajax-reload-auto-item') !== 'undefined') ? $element.data('ajax-reload-auto-item') : '',
                    page: <?= $GLOBALS['objPage']->id ?>
                }, function(response)
                {
                    $element.replaceWith(response.html);
                }
                });
            });
        }, 5000);
    });
})(jQuery);
</script>

Ungetestet aber extra runterprogrammiert für dich .

[chrisse]

Hallo,

ich benötige genau die gleiche Anforderung wie dirksche sie beschrieben hat.
Ein HTML Inhaltselement soll sich alle 5 sekunden automatisch neu laden.

Wenn ich jetzt das script so wie von spooky beschrieben einbinde bekomme ich folgenden Fehler.

Uncaught SyntaxError: missing ) after argument list

kann mir hier einer weiterhelfen.

Gruß
Christoph