Ergebnis 1 bis 8 von 8

Thema: Mit contao-ajax_reload_element Content Elemente per Ajax laden

  1. #1
    Contao-Fan Avatar von dirksche
    Registriert seit
    05.08.2009.
    Ort
    Grosslittgen
    Beiträge
    571

    Standard Mit contao-ajax_reload_element Content Elemente per Ajax laden

    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:

    Code:
    <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

  2. #2
    Contao-Fan
    Registriert seit
    27.06.2010.
    Ort
    Niedersachsen
    Beiträge
    530

    Standard

    Hallo dirksche,

    1. Die beiden Parameter
    Code:
    element: 'ce::88', page: <?= $GLOBALS['objPage']->id ?>
    kannst du löschen, die werden nicht mehr verwenden.
    2.
    Code:
    // The data- attribute is set automatically
                    ajax_reload_element: element.attr('data-ajax-reload-element')
    Hier sollte dann
    Code:
    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.

  3. #3
    Contao-Fan Avatar von dirksche
    Registriert seit
    05.08.2009.
    Ort
    Grosslittgen
    Beiträge
    571

    Standard

    Hi Richard,

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

    Grüße,
    Dirk

  4. #4
    Contao-Nutzer Avatar von Kahru
    Registriert seit
    20.06.2009.
    Ort
    Nordschwarzwald
    Beiträge
    125
    Partner-ID
    2067

    Standard

    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

  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    21.397
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    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.

  6. #6
    Contao-Nutzer Avatar von Kahru
    Registriert seit
    20.06.2009.
    Ort
    Nordschwarzwald
    Beiträge
    125
    Partner-ID
    2067

    Standard

    Hi Spooky,

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

    Code:
    <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

  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    21.397
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

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

  8. #8
    Contao-Nutzer Avatar von Kahru
    Registriert seit
    20.06.2009.
    Ort
    Nordschwarzwald
    Beiträge
    125
    Partner-ID
    2067

    Standard

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •