Ankündigung

Einklappen
Keine Ankündigung bisher.

CC-Inhalt mit AJAX nachladen/anzeigen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CC-Inhalt mit AJAX nachladen/anzeigen

    Moin,

    ich habe bei mir eine (E-Mail-)Adresse, die erst nach einem Klick auf einen Link bzw. einem Trigger-Element angezeigt werden soll. Da die Adresse nirgendwo angezeigt werden bzw. im Quelltext erscheinen soll, kommen keine CSS oder jQuery Lösungen in Frage.

    Ich bin jetzt nicht so firm in AJAX und habe mir daher hier ein paar Lösungen rausgesucht und das etwas umgebaut.

    Im Großen und Ganzen funktioniert es auch, da ich zusätzlich noch eine Mail-Funktion mit eingebaut habe, die mich informiert, sobald die E-Mail-Adresse angezeigt wurde. Diese E-Mail kommt auch an, sobald ich auf den Link bzw. Trigger klicke. Da muss also etwas ausgelöst und geladen werden.

    Ich habe nun allerdings das Problem, dass mein Button nicht durch den Text mit der E-Mail-Adresse ersetzt wird.

    Hier einmal mein Code:


    Template für die normale Modulausgabe:
    Code:
     <?php // the output template for the ajax content
    $ajx_content_template = 'customcatalog_mail_ajax_content';
    
    // ajax listener, render requested CC
    if(\Input::get('customcatalog_ajax') && \Environment::get('isAjaxRequest'))
    {
    $objModule = \ModuleModel::findByPk(\Input::get('module_id'));
    $objCC = \CustomCatalog::findByModule($objModule);
    
    if($objCC === null)
    {
    die();
    }
    $objCC->setLayoutTemplate($ajx_content_template);
    echo $objCC->render();
    die();
    }
    
    ?>
    
    <?php // include jquey
    global $objPage;
    if(!$objPage->hasJQuery)
    {
    $GLOBALS['TL_JAVASCRIPT'][] = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
    }
    ?>
    [...]
    
    <div class="ce_hyperlink" id="linkShow"><span onClick="showLink()">Link anzeigen</span></div>
    
    [...]
    
    <?php if(!$this->empty): ?>
    <script type='text/javascript'>
    /* <![CDATA[ */
    
    function showLink() {
    // send request
    jQuery.ajax(
    {
    method : "GET",
    url : location.href,
    data : {'customcatalog_ajax':1,'table':'<?= $this->getCustomCatalog()->getTable(); ?>','module_id':<?= $this->getCustomCatalog()->getModule()->id; ?>},
    // before seding
    beforeSend: function()
    {
    // put a loader or something here
    },
    // success
    success: function(html) {
    $("#linkShow").replaceWith(html);
    }
    });
    };
    /* ]]> */
    </script>
    
    <?php endif;?>
    Das customcatalog_mail_ajax_content-Template:

    Code:
    <a href="<?php echo $this->field('contactAdress')->value(); ?>" title="E-Mail schicken" target="_blank"><?php echo $this->field('contactText')->value(); ?>test</a>
    
    <?php
    
    $header = "From: Foo <foo@bar.tld>";
    $content = "Es wurde ein E-Mail-Link auf der Seite ". $_SERVER['HTTP_REFERER']. " angefordert.";
    
    mail('foo@bar.de', 'Ein E-Mail-Link wurde angefordert', $content, $header);
    Ich weiß auch nicht, ob der .replaceWitdh() aufruf so richtig ist. Wäre nett, wenn mir jemand weiterhelfen könnte, wo hier das Problem liegt.

    Viele Grüße
    Markus
    Zuletzt geändert von Sukrams; 21.03.2018, 15:35.

  • #2
    Der Aufbau liest sich erstmal gut. Ich hoffe du hast nicht wirklich [...] in deinem Code stehen, sondern nur hier eingesetzt.

    .replaceWith() selbst habe ich noch nie genutzt. Liest sich im jquery doc aber erstmal nicht verkehrt. Ich nutze immer den direkten html replace Aufruf von Jquery: .html('MEIN NEUES HTML');
    Ich nutze ich jquery immer im sicheren Namespace Modus.

    jQuery("#linkShow").replaceWith(html);
    Logge am besten mal, was dir Ajax als Anwort schickt im success Event. Dies musst der html Block des Links sein.

    console.log(html);

    Die kleine php Funktion für die Email scheint ja orgnundsgemäß zu senden.

    http://www.premium-contao-themes.com

    Kommentar


    • #3
      Nene, ich habe da nur das Template etwas eingekürzt, da ich denke, dass du ja deine CC-Templates kennen wirst

      Wenn ich console.log rein schreibe, schreibt er mir seltsamerweise gar nichts in die Konsole. Ich habe das .ReplaceWith() auch nochmal durch .html() ersetzt, das hilft aber auch nichts.

      Das einzige, was ich bekomme ist ein jQuery Error:

      Code:
      test-eintrag.html:358 Uncaught TypeError: $ is not a function
          at Object.success (test-eintrag.html:358)
          at j (jquery-1.11.3.min.js:2)
          at Object.fireWith [as resolveWith] (jquery-1.11.3.min.js:2)
          at x (jquery-1.11.3.min.js:5)
          at XMLHttpRequest.b (jquery-1.11.3.min.js:5)
      success @test-eintrag.html:358
      j @ jquery-1.11.3.min.js:2
      fireWith @ jquery-1.11.3.min.js:2
      x @ jquery-1.11.3.min.js:5
      b @ jquery-1.11.3.min.js:5
      XMLHttpRequest.send (async)
      send @ jquery-1.11.3.min.js:5
      ajax @ jquery-1.11.3.min.js:5
      showLink @ test-eintrag:346
      onclick @ test-eintrag.html:330
      Ich habe daraufhin mal das $ durch jQuery("#linkShow) ersetzt, was aber auch nichts hilft.

      Die Mail kommt aber weiterhin an, da muss also ein Aufruf stattfinden.

      Kommentar


      • #4
        Der Aufruf findet ja auch statt und scheitet auch seitens des Servers nicht. Sonst würde Ajax nicht in das success Event gehen. Du hast halt klassische Jquery / Mootools Fehler, in Zeile 358 des gesamten Quelltext. Das sind aus sich des Servers keine Fehler. JS ist clientseitig.
        Der $ is not a function Fehler ist tausendfach dokumentiert bei Google.

        Schau mal genau wie ich jquery initialisiere und mein JS darein verbaue. Immer innerhalb eines domready Events, immer im Namespace. Damit wird abgesichert, dass 1. das gesamte DOM Document geladen ist und 2. jQuery nicht auf das komische psydo php Dollar-Zeichen reagieren muss. (wer hat sich das damals nur ausgedacht)
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          So, das funktioniert jetzt. .replaceWith() funktionierte hier übrigens nicht, da wurde der Button komplett eliminiert und weiß. Dein .html() funktioniert auch hier.

          Jetzt bekomme ich auch das korrekte HTML ersetzt, allerdings ist es leer und bekommt offenbar keine Daten aus dem CC. Die Daten sind da, also die Aufrufe funktionieren, das habe ich gerade auf der Seite getestet.

          Muss ich da beim Aufruf des Templates noch etwas beachten und den CC nochmal irgendwie einbinden? Oder kann ich das anderweitig testen, ob die Daten vorhanden sind und womit ich arbeiten kann?

          Wenn ich einen var_dump drauf packe, ist da auch der Value leer.

          Kommentar


          • #6
            Naja, du nutzt hier eine Vorlage, die eine ganze Liste per Ajax läd. Du solltest auf einen Eintrag reduzieren mit Hilfe eines kleinen Filter-Objekts.
            Da du dann ja auch noch im CC ajax Inhalt Template mit $this abfragst, kommt maximal der Inhalt des allerletzten Eintrags rein. (klassischer Fehler im Liste-Template)
            http://www.premium-contao-themes.com

            Kommentar


            • #7
              Funktioniert das dann nur über die Liste oder könnte man das auch für einen Eintrag machen? Da ich ja die Anzeige ja nur auf der Detailseite habe. Kann ich da überhaupt noch einen Filter bzw. eine Liste einbinden? Weiß er dann, welches Element das ist?

              Kommentar


              • #8
                Du musst das auf ein Element reduzieren. Das Element muss du ihm mitteilen.
                http://www.premium-contao-themes.com

                Kommentar


                • #9
                  Anstelle des Lesers jetzt oder zusätzlich noch eine Liste mit dem Element?

                  Kommentar


                  • #10
                    Zitat von Sukrams Beitrag anzeigen
                    Anstelle des Lesers jetzt oder zusätzlich noch eine Liste mit dem Element?
                    Hä?

                    Das bringt so nichts. Einmal wäre es natürlich wichtig, du würdest ein bissel mehr mit Ajax gearbeitet haben. Mehr als mit einer direkten Vorlage, kann ich schriftlich nicht erklären. Das bringt einfach nichts. Ich erklär mich nur im Kreis herum. Da fehlt die Basis.

                    Ich helf ja gern auch mit bissel Code Schnippseln aus, aber dafür reicht schlicht weg die Aufgabenerklärung nicht aus.
                    Du musst genau erklären was dein E-Mail-Button machen soll und nach welcher Logik er eine individuelle E-Mail-Adresse beinhalten soll.
                    Es geht hier auch nicht hervor, ob dieser Button in einem Liste-Template für JEDEN CC Eintrag auftaucht, oder ob der nur in einem Leser eingesetzt wird und quasi nur den aktuellen betrachteten Eintrag als Quelle nutzen soll.
                    http://www.premium-contao-themes.com

                    Kommentar


                    • #11
                      Okay,

                      ich habe ja eingangs bereits geschrieben, das ich bisher noch nicht wirklich mit AJAX zu tun hatte.

                      Also der Button erscheint nur in der Detailansicht des Eintrags im Leser und taucht in der Übersicht nicht auf. Hier soll eine Kontaktadresse (bzw. eher Kontaktmöglichkeit) zu dem Eintrag erscheinen, der über den CC gepflegt wird. Die Kontaktmöglichkeit soll eben erst erscheinen, wenn man auf den Link klickt.

                      Die Kontaktdaten können im CC-Eintrag eingegeben werden (Felder "contactAddress" und "contactText") und sollen darüber dann auch für den Eintrag entsprechend in der Detailansicht ausgegeben werden. Die Quelle wäre da also nur der jeweilige Eintrag selbst.

                      Hoffe, dass das jetzt klarer ist.

                      Kommentar


                      • #12
                        Wenn es ohnehin nur für einen Leser gelten soll, ist es zu aufwendig gelöst. Das hier reicht: Ich hole nur die E-Mail-Adresse per Ajax. Hier reicht dann auch ein Inserttag für die Antwort, da wir uns ohnehin auf einem Leser befinden und Ajax auch keine andere Seite läd.

                        Einen html Link um die E-Mail bauen kann als Ajax-Antwort gemacht werden in php oder man grabscht sich die Email mit JS und platzt die irgendwo ein.

                        Code:
                        <?php 
                        
                        // ajax listener
                        if(\Input::get('customcatalog_ajax') && \Environment::get('isAjaxRequest'))
                        {
                        
                        // hole die email adresse, als ajax antwort. Inserttag reicht hier, weil wir ohnehin auf der Leser-Seite sind
                        $email = $this->replaceInsertTags('{{customcatalog::my_table::autoitem::my_email}}');
                        die ($email);
                        
                        }
                        
                        ?>
                        
                        <?php // include jquey
                        global $objPage;
                        if(!$objPage->hasJQuery)
                        {
                        $GLOBALS['TL_JAVASCRIPT'][] = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
                        }
                        ?>
                        
                        <div class="ce_hyperlink" id="linkShow"><span onClick="showLink()">Link anzeigen</span></div>
                        
                        <?php if(!$this->empty): ?>
                        <script type='text/javascript'>
                        /* <![CDATA[ */
                        
                        function showLink() {
                        // send request
                        jQuery.ajax(
                        {
                        method : "GET",
                        url : location.href,
                        data : {'customcatalog_ajax':1},
                        
                        // success
                        success: function(html) {
                        jQuery("#linkShow").html(html);
                        }
                        });
                        };
                        /* ]]> */
                        </script>
                        
                        <?php endif;?>
                        http://www.premium-contao-themes.com

                        Kommentar

                        Lädt...
                        X