TwitterReader per Ajax laden

Guten Tag!

Ich hatte das Problem, dass bei einer Seite mit viel Traffic das Frontendmodul der Erweiterung "TwitterReader" die Ladezeit der Seite auf ca. 16s verzögert hat (da die Twitter-Api recht langsam reagiert hat). Da keine Zeit für eine Überarbeitung der Erweiterung (Richtung Caching) bestand, musste ein Workaround her:

TwitterReader per Ajax nachladen

Schritt 1:
In den Einstellungen fügen wir bei den erlaubten Tag "<script>" hinzu. Diese Einstellung erlaubt nun in jedem HTML-Editor-Feld, auch Javascript einzufügen. Das ist nicht gut, wenn ein großer Benutzerkreis auch Zugriff auf das Backend hat!

Schritt 2:
Wir installieren über den Erweiterungkatalog die Erweiterung "Ajax"

Schritt 3:
Falls es noch nicht besteht: Ein neues Frontendmodul für den TwitterReader (Modultyp: "Twitternachrichten anzeigen"). Hier können wir uns auch gleich die ID des Frontendmoduls merken.

Schritt 4:
Wir legen ein weiteres Frontendmodul an (Typ: Eigener HTML-Code) mit folgendem Inhalt:

HTML-Code:

---

<div id="twitter_teaser_box">
  <div id="tr_wait" style="padding-left:119px;padding-top:40px"
    <img src="plugins/slimbox/css/loading.gif" alt="loading" /></div></div>
  </div>
</div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
  window.addEvent('domready', function() {
      new Request.HTML({
          'evalScripts':false,
          'update':$('twitter_teaser_box'),
          'onSuccess': function() {
              // Ladeanzeige ausblenden
              $('tr_wait').setStyle('display','none');
              // Hier könnte z.B. auch ein Tickerscript gestartet werden.
          }
      }).get('/ajax.php?action=fmd&id=_id_&g=1'); // Hier muss die ID des Frontendmoduls eingetragen werden.
  });
/*]]>*/-->
</script>

---

Wir müssen "_id_" im Ajax-Aufruf ('/ajax.php?...') noch durch die gemerkte ID ersetzen!

Schritt 5:
Jetzt müssen wir unser Frontendmodul aus Schritt 4 noch in das Seitenlayout einbinden. Natürlich sollten wir auch noch das Styling und das HTML-Template an unsere Wunschoptik anpassen.

Wenn jetzt die Seite aufgerufen wird, erscheint sie ohne lästige Verzögerung - lediglich das Twitter-Frontendmodul läd unter Umständen später nach.

Viel Spaß damit!
Carsten

Nette Sache das, werd ich auf jeden Fall in meinen kommenden Blog einbauen.

Danke dafür!

Gruß
Nikolas

Hallo Carsten,

da sind dir in der 3. Zeile noch zwei schließende div's durchgegangen. Hier mal korrigiert:

HTML-Code:

---

<div id="twitter_teaser_box">
  <div id="tr_wait">
    <img src="plugins/slimbox/css/loading.gif" alt="loading" />
  </div>
</div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
  window.addEvent('domready', function() {
      new Request.HTML({
          'evalScripts':false,
          'update':$('twitter_teaser_box'),
          'onSuccess': function() {
              // Ladeanzeige ausblenden
              $('tr_wait').setStyle('display','none');
              // Hier könnte z.B. auch ein Tickerscript gestartet werden.
          }
      }).get('/ajax.php?action=fmd&id=_id_&g=1'); // Hier muss die ID des Frontendmoduls eingetragen werden.
  });
/*]]>*/-->
</script>

---

Gruß Janosch

Servus,

finde ich eine super Sache, so ein Tut.
Leider zeigt er bei mir nix an.
Ich habe in einer Testumgebung einmal das Modul als solches eingebunden und einmal als HTML-Modul mit dem hier geposteten Code.
Das "Twittermeldungen anzeigen"-Modul wird normal angezeigt, wie es soll. Das HTML-Modul hingegen zeigt kurz das Lade-.gif und danach nichts mehr. Woran könnte der Fehler liegen? Muss ich was am Seitenlayout ändern? Habe <script> unter Einstellungen eingetragen und die anderen Schritte ebenfalls durchgeführt.

Beste Grüße
Alex

Habe dasselbe selbst probieren wollen, aber nun folgendes Problem: der output, der von der ajax.php zurückkommt, ist komplett escaped. Ich bekomme also zB

Code:

---

<ul>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t<li class=\"tweet even  \">\t\t\t\t\t\t\n\t\t\t\t\t\t\tSpotify for Android now available for preview <a title=\"http:\/\/t.co\/dz4dyNq4\" href=\"http:\/\/t.co\/dz4dyNq4\"  onclick=\"this.blur();window.open(this.href);return false\">http:\/\/t.co\/dz4dyNq4<\/a> via <a title=\"Spotify\" href=\"http:\/\/www.twitter.com\/Spotify\"  onclick=\"this.blur();window.open(this.href);return false\">@Spotify<\/a> -

---

(Ausschnitt). Das sind eben bspw. die Tabulatorschritte 1:1 so wie sie im jeweiligen template vorkommen.

Woran könnte das liegen? Mein AJAX call sieht zwar ein wenig anders aus:

Code:

---

        var req = new Request.HTML({
                method: 'get',
                url: 'http://www.foo.at/ajax.php',
                data: { 'action' : 'fmd', 'id' : '3', 'g' : 1 },
                onRequest: function() { /*...*/ },
                update: $('main'),
                onComplete: function(response) { /*...*/ }
        }).send();

---

allerdings passiert dasselbe auch, wenn ich http://www.foo.at/ajax.php?action=fmd&id=3&g=1 direkt im Browser aufrufe. Gibt es zur "ajax" extension auch irgendwo eine Dokumentation? In der Beschreibung wird ja nur die 'action' und 'id' Variable erwähnt, der Manual link führt zur Website des Authors, wo wiederum nur auf das Forum verwiesen wird. Von der 'g=1' Variable wusste ich daher auch gar nichts, ohne der geschieht gar nichts (was genau macht die?).

// ok, im source habe ich gesehen, dass mit g=1 einfach ->generate() statt ->generateAjax() aufgerufen wird (letzteres existiert ja nur bei Modulen die das unterstützen).

Habe mittlerweile das Problem gefunden. In Contao > 2.9 wird in der ajax.php das Ergebnis in JSON encodet. Siehe

PHP-Code:

---

        if (version_compare(VERSION, '2.9', '>'))
        {
            $varValue = json_encode(array
            (
                'token'        => REQUEST_TOKEN,
                'content'    => $varValue,
            ));
        } 


---

in PageAjax::ouput. Prinzipiell kein Problem, ich habe daher den Request umgeändert:

Code:

---

        var jsonRequest = new Request.JSON({
                url: '/ajax.php',
                onSuccess: function(response){ $('twitter').set('text',response.content); }
        }).get({ 'action' : 'fmd', 'id' : '_id_', 'g' : '1' });

---

Jetzt habe ich allerdings noch das Problem, dass der content immer noch escaped ist. Ich hätte es schon mit unescape(response.content) probiert, leider hat das nicht geholfen. Sollte das hier nicht funktionieren?

// oops, nvm., bin auch noch zu unerfahren mit MooTools ;). Richtig ist natürlich .set('html',...) statt .set('text',...)