CMS-Jack
Blog
Blog - Neues passiert
typo3javascriptjqueryimagecyclejfmulticontentlinuxcsssuexect3blogfastcgisexybookmarkspowermaildebianapacheimagecarouselt3jqueryfehlermac ostastaturcoin-slidernagioshtmlrtepagetypeimage cyclefirefoxsnippetanalysepatchjfcloudzoomxhtmltabscloudeffektcross-slideriossdkiphonexcodeirrejfimageflowbackenstylehooksbackendtyposcriptfadegrafikurljquery uithemerollerfollow mebildergalerieimageflow

Dez
16

Häufige Fehler bei Typo3 mit jQuery (2)

Javascript /Typo3
Gravatar: Jürgen Furrer

t3jquery-Modul fehlt (ADMIN TOOLS)

Ja, die Frage nach dem t3jquery-Modul höre ich oft, das ist aber eigentlich ganz einfach:

Da man das t3jquery-Modul nur dann benötigt, wenn man eine Lokale, individuelle Lib zusammenstellen möchte, wird das Modul einfach nicht angezeigt wenn man die Lib (jQuery, jQuery UI oder jQuery TOOLS) per CDN lädt.

Damit das Modul mit der Individuellen Konfiguration angezeigt wird, muss folgendes gemacht werden:

  1. Extension Manger
  2. t3jquery suchen
  3. Configuration-Tab öffnen
  4. Hacken bei CDN entfernen
  5. UPDATE-Knopf drücken
  6. Komplettes Backend neu laden (F5)

Und VALA, das Modul ist wieder da

 

Views: 230

Zurück

Dez
15

Häufige Fehler bei Typo3 mit jQuery (1)

Javascript /Typo3
Gravatar:

Doppeltes Laden von jQuery

Der häufigste Fehler der auftritt beim verwenden von Erweiterungen die jQuery verwenden, ist das doppelte Laden der jQuery-Lib.

Das kommt daher, dass jede Erweiterung die jQuery verwendet die Lib mitliefert und diese auch lädt (könnte ja sein, dass jQuery noch nicht geladen ist)

Wenn man nun zwei Erweiterungen auf der gleichen Seite hat die jQuery verwenden, kommt es zu einem Konflikt, denn folgendes passiert:

Nehmen wir an, wir haben ein jQuery-Plugin das hans heisst, und ein jQuery-Plugin das fritz heisst, diese beiden Plugins werden von zwei verschiedenen Erweiterungen geladen, Plugin tx_hans_pi1 und tx_fritz_pi1. Beide Erweiterungen liefern eine jQuery-Lib mit und diese werden in den Header geladen, in der Reihenfolge wie die Erweiterungen auf der Seite eingefügt wurden.

Zuerst kommt das Plugin tx_hans_pi1 und lädt die jQuery-Lib und das jQuery-Plugin hans dann kommt das Plugin tx_fritz_pi1 und lädt wiederum die jQuery-Lib und das jQuery-Plugin fritz.

Somit ist die Reihenfolge der Scripts wie folgt:

  1. jQuery
  2. hans (das Plugin wird registriert)
  3. jQuery (alle Plugins die bis jetzt registriert wurden, sind nicht mehr registriert)
  4. fritz

Wenn jetzt das Plugin fritz aufgerufen wird, dann funktioniert das ohne Probleme, das Plugin hans ist durch das zweite laden der Lib wieder "entladen" worden und wirf einen Fehler "jQuery("#myid").hans is not a function"

Lösen kann man diesen Fehler folgendermassen:

  1. Bei den meisten Modulen kann man das laden der jQuery-Lib unterbinden, also lädt man das jQuery mittels headerData vom fileadmin und deaktiviert jQuery in den Erweiterungen
  2. Viel Erweiterungen unterstützen t3jquery, damit wird das laden der Lib automatisch unterbunden (siehe, imagecycel, imagecarousel, jf360shots etc.)

Beispiel zu der ersten Lösung

Um die erste Lösung umzusetzen, muss das Integrieren der mitgelieferten Lib unterbunden werden, da jede Erweiterung die verwendete JS-Library einbindet, muss das bei jeder Erweiterung gemacht werden, hier einige Bespiel für diverse Erweiterungen (Konstanten):

// imagecycle
plugin.tx_imagecycle_pi1.file.jQueryLibrary =
plugin.tx_imagecycle_pi2.file.jQueryLibrary =
plugin.tx_imagecycle_pi3.file.jQueryLibrary =
plugin.tx_imagecycle_pi4.file.jQueryLibrary =
plugin.tx_imagecycle_pi5.file.jQueryLibrary =

// imagecarousel
plugin.tx_imagecarousel_pi1.file.jQueryLibrary =

// jfmulticontent
plugin.tx_jfmulticontent_pi1.file.jQueryLibrary =

// jf_headerslide
plugin.jf_headerslide.file.pathToMootools =

Jetzt muss die eigene Lib von der Projektseite heruntergeladen werden, oder aus einer Erweiterung kopiert werden. Hier findet man die aktuellen Dateien von jQueryMooTools und Prototype

Die Datei kopiert man dann in den fileadmin-Ordner und bindet diese per Typoscript in die Seite ein:

page.includeJS.file12 = fileadmin/js/jquery.js
Views: 426

Zurück