Vorstellung Extension getcontentbyajax

Die TYPO3-Erweiterung getcontentbyajax habe ich für www.digitalagentur-mainz.de programmiert, sie ist nun schon seit knapp einem Jahr im TER. Mit dieser Erweiterung wird jede aufgerufene Seite via Ajax nachgeladen: Jeder Klick auf einen internen Link resultiert in einer Ajax-Anfrage. Damit sind nette Effekte möglich, z.B. das Einschieben der Inhalte von der Seite. Diesen Effekt kann man sich bei www.digitalagentur-mainz.de (mittlerweile gab es einen Relaunch) oder auch bei meiner eigenen Webseite (sbtheke.de) anschauen. Aber auch die verbesserte Ladegeschwindigkeit der Seite ist ein nicht unwichtiger Punkt. Die Erweiterung kann mit nur wenigen Einstellungen für bestehende Webseiten aktiviert werden und funktioniert auch mit Inhalten aus fremden Erweiterungen.

Es gibt keinerlei Einschränkungen für den Benutzer, die man sonst oft bei Ajax-Funktionen hat: Beim Aufrufen einer neuen Seite wird die URL in der Adressleiste und der Browsertitel aktualisiert, die Blätterfunktionen des Browsers funktionieren und die Seite funktioniert auch ohne JavaScript.

Das Nachladen der Inhalte funktioniert wie folgt vor:

  1. Der Benutzer klickt auf einen internen Link
  2. Mit JavaScript wird das normale Laden der Seite verhindert, ein Ladebalken wird eingeblendet
  3. Die angefragte URL wird in die Adress-Leiste gesetzt, danach wird sie via Ajax an den Server gesendet
  4. Der Server verarbeitet die URL, erhält so den Inhalt der angefragten Seite und liefert den gewünschten Teilbereich daraus zurück
  5. Mit JavaScript wird der Inhalt ausgetauscht, der Ladebalken wird ausgeblendet
  6. Wenn es sich bei dem angeklickten Link um einen Eintrag in einem Navigationsmenü gehandelt hat, erhält der Link und die übergeordneten Ebenen die Klasse „act“

Wenn du getcontentbyajax einsetzst, freue ich mich über einen Link zu der Webseite. Oder schreibe mir, welche Erfahrungen du mit der Erweiterung gemacht hast – vielleicht gibt es ja Nachteile, von denen ich nichts weiß?

30 Kommentare zu “Vorstellung Extension getcontentbyajax”

  1. Hallo,

    finde die Extension „getcontentbyajax“ echt genial.
    Hab sie installiert – funktioniert super.

    Nur ein Problem hab ich:
    Auf manchen Unterseiten meiner Website hab ich separate CSS-Dateien eingebunden. Lade ich nun den Content dieser Unterseiten per Ajax, werden diese CSS-Dateien nicht mitgeladen.
    … gibt es da eine Lösung?

    Vielen Dank im Voraus!
    lg
    Georg

  2. Nein, die Inhalte im head müssen auf allen Seiten gleich sein. Das ist natürlich ungeschickt, wenn man bestimmten Seitenbäumen ein anderes Aussehen verpassen möchte. Vielleicht ist die Lösung, diesen Seiten eine bestimmte Klasse im body-Tag zu vergeben, also z.B. ? Diese Klasse kann man ja über TypoScript setzen und sie vererbt sich somit auf Unterseiten.

  3. Hallo Sven,
    ich hatte gerade angefangen eine kleine Ext. zu Bauen um Content mit ajax/json zu laden, da viel mir ein, ich hatte doch leztens im Ter beim Überfliegen etwas ähnliches Gelesen. Nun ein bisschen Gesucht und Gefunden. „getcontentbyajax“ Das ganze auch gleich mal Runtergeladen und die File Dateien mal durchflogen. Naja, dachte ich. Da war ich ja nicht weit weg vom Wege mit dem was ich zusammen Gefriemelt hatte. Ok. Nun dann mal Installieren. Laut Manual waren ja nicht viele Gegebenheiten zu ändern. eingefügt und mal auf eine Wirkung im FE geschaut. Nichts. Firefox gestartet, geschaut. Nichts. Firebug ajax request ist lehr. Viel Zeit mit weiteren Versuchen Verbracht. Kein Erfolg. Nichts Geht. Neuer Versuch auf einer Frischen TYPO3 Installation auf local Wamp. Schnell mal das Alte yaml_tv mit den Dummy Seiten und Deine Ext. Installiert. Test im Fe. Alles Geht auf Anhieb. Ich finde den Fehler dazu aber nicht. Was kann es sein. Unterschied zwischen Online und lokaler wamp Installation ist Fluid Templating mit Gridelements und yaml_tv, logisch mit Templavoila. Beide TYPO3 Installationen sind aktuell 4.5.22.
    Hast Du einen Tip?

    gruss
    matthias

  4. Du schreibst „Firebug ajax request ist lehr“ – bedeutet das, dass der Ajax Request keine Antwort liefert oder dass er erst gar nicht angestoßen wird?
    Wenn er nicht angestoßen wird, liegt der Fehler am JavaScript, wenn er keine Antwort liefert, musst du PHP debuggen.

  5. Hallo Sven,
    danke für Deine Antwort. Ich möchte Dir jetzt nicht zu Last fallen und Dir Deine Zeit Rauben aber ich kann am PHP keine Fehler entdecken. Ich habe jetzt nochmal einen anderen Test gemacht indem ich auf dem Online Server schnell mal einen Neuen Webspace mit ner Domain die Dort noch ungenutzt rumliegt erstell und eine Komplett frische TYPO3 Installation Packte. Minimum Setup für FLUID Template. Ein paar Seiten Angelegt, Dummy Content Angelegt. YAML4 CSS angeschlossen. Deine Extension Installiert. Alles bei Default gelassen wie vorher bei der Lokalen Installation. Ergebnis, keine Reaktion. Weiter im Text. Alles an Fluid Templating wieder Runtergeschmissen. Ein Sauberes TYPO3 also wieder. Die Alte YAML3 DB importiert. Default Extensions für YAML3 wie Templavoila, static_info_tables,realurl usw. Result im FE ist folgender. Bei klick auf ein Menu Link fadeOut die Seite. Also schon mal eine Reaktion. Jedoch zur nächsten Seite geht es nicht weiter. Anstatt die Neue Seite wird Deine ERROR Message eingeblendet.
    „An error occured, please reload the site or click this link to load your desired page.“

    Der responceText von Firebug gibt folgendes:

    responseText
    "{"content":"An error occured, please reload the site or click this link to load your desired page.","success":false}"

    Das eigenartige jetzt daran ist, dass beide Installationen die absolut gleiche Setup Einstellun haben über yaml3. Nichts geändert ausser baseUrl. An deiner Ext. nur ins setup mal die jQuery von googlecode mit reingepackt. Bei beiden gleich. Nur auf dem Lokale Server läuft PHP 5.4.3 und auf dem Online Server 5.2.17. Auf Lokalserver geht es, Online Server bleibt Hängen. Die Url zur Online Seite ist yellowmaps-24 dot com.

    An den Einträgen im Deprecation Log „t3lib_div::GPvar()“ kann es ja nicht liegen. Mit einer kleine Test Ext. für einen json respond bekomme ich ein result.

    $feUserObj = tslib_eidtools::initFeUser();
    tslib_eidtools::connectDB();
    echo "

    ", print_r($GLOBALS["TYPO3_DB"]), "

    ";

    Ich weiß jetzt nicht was ich wo noch Checken kann.
    Echt Schade, denn ich hätte Deine Ext. gerne Verwendet.

    gruss
    matthias

  6. Hi, Sven,
    danke dass Du dir Zeit genommen hast. Sorry, wie ich jetzt die URL Debuggen soll fällt mir jetzt nicht ein. Mir Raucht der Kopf. 2 Tage damit Verbracht. Und ich finde den Fehler nicht. Habe noch die class.tx_getcontentbyajax_ajax.php auf
    –> t3lib_div::_GP umgestellt.
    Es kann doch dann nur am Server und Die PHP Einstellung liegen. Kann doch nicht sein dass auf einem Lokalen Wamp es auf Anhieb ohne jegliche Anpassungen sofort ein Possitives Ergebniss geliefert wird.
    gruss
    matthias

  7. Eine der Funktionen schlägt bei dir fehl: file_get_contents() oder preg_match().
    Die Ext. muss ich demnächst mal updaten, wegen der veralteten Funktion GPvar() und anderem, vielleicht funktioniert sie dann auch bei dir.

  8. Hallo Sven,
    danke nochmal für Deine Zeit welche Du für mich Geopfert hattest. Im Moment habe ich wenig Zeit mich nochmal darum zu kümmern wo der Fehler liegt. Trotzdem würde es mich Freuen wenn ich Deine Ext. doch noch mal einsetzen kann. Wenn Du einen Update der Ext. in Planung hast wäre es vielleicht gut gleich die Kompatibilität zu TYPO3 6.xx zu Integrieren.

    Nochmals Vielen Dank und Grüße von der Insel
    Matthias

  9. Hi Sven,
    ich konnte die Finger nicht still halten und musste doch nochmal nach dem Fehler suchen.

    Ich habe ihn Gefunden…

    fopen war es. Man/n oh man/n
    Na denn demnächst Bastelstunde.

    Gruß
    Matthias

  10. I tried to get your extension running with the introduction package with xampp, but without a chance.

    The pages load without an effect, and firebug shows the following markup:

    Loading…

  11. Hallo Sven,
    Danke für diese Klasse-Extension!!! Ich habe vorher auf deiner Website geschaut und mich würde interessieren wie du den Slider realisiert hast. Könntest du mir da einen heißen Tipp geben?

    Gibt es auch die Möglichkeit Colorbox Contents zu verwenden? Da steht ja in der Klasse immer die ID des Contentelementes dazu, ergo kann ich diese Klasse im Javascript auch nicht ausschließen, so wie du es mit der normalen Colorbox Galerieklasse eingefügt hast.

    Danke und Grüße,
    Marko

  12. Hallo Marko,
    du musst dir die javascript.js aus dem Extension-Verzeichnis kopieren und anpassen, oder du nimmst die JS-Datei von meiner Seite. Auf reinstil.de gibt es den gleichen Effekt, plus einen slidenden Hintergrund.
    Deine Frage über die Colorbox Contents verstehe ich nicht…?
    Viele Grüße
    Sven

  13. Hallo Sven,

    ich habe jetzt alles soweit hinbekommen. Nur stellt sich mir gerade die Frage, wenn der Header nicht neu geladen wird, was passiert dann mit meinen seitenspezifischen Metatags. Die werden dann ja nicht ersetzt. Ist das so? Gibt es da schon Gedanken wie man das ändern könnte?

    Nochmal zum Colorbox Thema:
    Möchte ich ein Bild in der Colorbox öffnen, habe ich einen Link der in etwa so aussieht a class=“rzcolorbox“… im JS sage ich das diese Klasse keinen Request auslöst. Funktioniert!

    Wenn ich aber ein Contenelement in der Colorbox öffnen möchte, generiert sich der Link wie folgt: a class=“rzcolorbox12″… es wird ergo die ID des CE angehängt. Macht ja auch Sinn. Dies müsste ich nun auch noch im JS ausschließen. Hast du da ne Idee?

    Sollte ich das so versuchen?
    var i = 0; i++

    oder könnte ich das auch via rel=“colorbox“ ausschließen?

    Danke und Grüße
    Marko

  14. Hallo Marko,

    die Metatags müssen nicht ersetzt werden, wieso auch? Wenn Suchmaschinen die Seite indexieren, laden sie diese wie gewohnt und dann sind auch die Metatags seitenspezifisch.

    Bei der Colorbox müsstest du noch die Klasse „rzcolorbox“ hineinsetzen oder eine andere Extension verwenden. Es ist ungewöhnlich, dass „class=rzcolorbox12“ gesetzt wird, einleuchtender wäre „id=rzcolorbox12 class=rzcolorbox“.
    Du könntest es aber auch anhand dem rel-Attribut deaktivieren.

    Viele Grüße
    Sven

  15. Hallo Sven,

    so sieht der Colorbox Link aus wenn ich ein CE öffnen möchte:

    Popup öffnen

    Ein „rel“ hat er auch nicht, das könnte ich aber über die EXT eintragen. Wie notiere ich das dann im Javascript?

  16. Hallo, wenn man unter New Record eine neue Domain erstellt, wird danach der Inhalt nicht mehr geladen, besser gesagt es wird dann immer nur die erste Seite geladen. (Evtl. hängt das aber auch mit der Multidomain Installation zusammen). LG

  17. Hallo Sven,
    danke für diese Tolle Extension!!!!

    hab eine frage zum Supersized.
    Kannst du kurz erklären wie du diese eingebunden hast.

    Danke
    Christian

  18. Habe die Ext. wieder entfernen müssen, da tt_products keine produkte mehr anzeigen wollte.
    Warum, kann ich nicht herausfinden. Ich stecke da nicht so tief drinne.
    LG
    Micha

  19. Hi Micha,
    die Darstellung der Produkte sollte eigentlich weiterhin funktionieren. Was nicht funktionieren würde, ist der Warenkorb, denn beim Anfragen der Inhalte über Ajax wird die aktuelle Session des Besuchers nicht beachtet. Die Seite mit dem Warenkorb müsste also wie gewohnt aufgerufen werden, ohne Ajax.

  20. Hallo Sven,
    kannst Du mir sagen, ob getcontentbyajax auch mit TYPO3 6.x läuft? Falls nein, planst Du ein Update?
    Danke,
    Rolf

  21. Hallo Rolf,
    mit TYPO3 6.0 hatte ich die Extension mal erfolgreich laufen. Wie es mit den anderen Versionen aussieht, weiß ich nicht, es sollte aber funktionieren.
    Viele Grüße
    Sven

  22. Mann, das ist ja schlimm, wenn man das von „Matthias“ (u.a. am Donnerstag, 22. November 2012 2:59) lesen muss! So viele Rechtschreibe- und Grammatikfehler!??? :-(

    Wenn er aber nun in 2010 erst eingewandert ist aus einem fernen Land, dann hab ich nichts gesagt. Wenn er aber Deutscher ist und über 10 Jahre, dann ist es PEINLICH!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.