024 Joomla JavaScript Fehler25.10.2015 (jh): Ein vermeintlich kleines Problem hat mich schier in den Wahnsinn getrieben, deswegen möchte ich hier die Lösung archivieren und für andere bereitstellen. Ziel war es, einen sehr simplen Toggle-Effekt einzubauen. Ich wollte nicht extra auf ein Plugin oder Modul zurückgreifen. Zudem boten die Standardlösungen nicht das, was ich mir vorstellte.

Die Ausgangssituation

"Eigentlich" versuche ich - wenn immer es geht - auf JavaScript zu verzichten. Mittlerweile lassen sich viele schöne Effekte mit CSS und HTML umsetzen. Das ist schlank und gleichermaßen elegant. Aber nicht immer kommt man um JavaScript umhin. Ich habe einen sehr simplen Slider gebraucht, der bei Klick auf- und zuslidet. Ich erinnerte mich an ein Code-Snippet, was ich schon seit einigen Jahren anderswo im Einsatz habe und dort auch funktioniert - allerdings in einer Nicht-Joomla-Umgebung.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("dt").click(function(){ // trigger
        $(this).next("dd").slideToggle("slow"); // blendet beim Klick auf "dt" die nächste "dd" ein.
        $(this).children("a").toggleClass("closed open"); // wechselt beim Klick auf "dt" die Klasse des enthaltenen a-Tags von "closed" zu "open".
    });
});

</script>

Die Kommentare im Code sind selbsterklärend - ein simpler Slider eben. Also dachte ich mir, super, dass binde ich jetzt mal eben in einem Beitrag in Joomla ein. Copy & Paste und speichern. Aus dem "mal eben" wurde nichts. Der versierte Leser wird vielleicht auf Anhieb den Fehler finden, aber ich sah den Wald vor lauter Bäumen nicht. Folgendermaßen bin ich vorgegangen:

JavaScript in Joomla einbinden und ausführen

  1. JQuery-Library in den Head-Bereich packen
  2. eigene JavaScript-Datei nach dem gleichen Prinzip wie eine CSS-Datei anlegen und einbinden (custom.js)
  3. den Code in die custom.js einfügen
  4. dort ausführen, wo er gebraucht wird

Und während eben dieses simple Snippet auf meiner anderen Seite funktioniert, tut sich im Joomla-Beitrag - nichts. Ich suchte eine ganze Weile an der völlig falschen Stelle und ignorierte zudem eine Fehlermeldung von Firebug, die da lautete:

TypeError: $ is not a function
$(this).next("dd").slideToggle("slow"); // blendet beim Klick auf "dt" die nächs...

Normalerweise habe ich bei solchen Problemen immer zuerst ein Auge auf die Meldungen von Firebug, aber diese Fehlermeldungen tauchte dummerweise erst nach einer kurzen Verzögerung auf, so dass ich sie beim hastigen Rumklicken schlichtweg übersehen habe.

024 Joomla JavaScript Type Error

Die Lösung...

... kann so einfach sein und deswegen rede ich hier nicht mehr um den heißen Brei rum:

jQuery(document).ready(function($){
    $("dt").click(function(){ // trigger
        $(this).next("dd").slideToggle("fast"); // blendet beim Klick auf "dt" die nächste "dd" ein.
        $(this).children("a").toggleClass("closed open"); // wechselt beim Klick auf "dt" die Klasse des enthaltenen a-Tags von "closed" zu "open".
    });
});

Ein Erklärungsansatz (bitte in den Kommentaren posten, falls ich hier falsch liege): Die JQuery-Library, die in Joomla eingebunden wird, läuft im noConflict()-Mode, deswegen ist der globale $-Shortcut nicht verfügbar und folgender allgemeiner Funktionsaufbau wird einen Fehler hervorrufen:

$(document).ready(function(){
     $(irgendeineFunktion) ...
});

Und so geht es:

jQuery(document).ready(function(){
    jQuery(irgendeineFunktion) ...
});

Übrigens triggert, dieser Fehler auch andere, wie man in dem Screenshot aus Firebug sehen kann. Nach Anpassung ist auch der hasTooltip-Fehler verschwunden. Also: Bevor vermeintlich simple Code-Snippets includet werden, sollte man einfach kurz prüfen, ob der noConflict-Mode aktiviert ist und dementsprechend die Funktion anpassen.

Aktuelles im Blog

Haben Sie Fragen?

Rufen Sie mich an:

+49 176 56982110

Oder nutzen Sie das Kontaktformular

The Lead-Machine!

Lead- und Sale-Generierung.

Marketing Lead und Sale GenerierungSie bieten Produkte oder Dienstleistungen im End-Consumer-Bereich und brauchen Kunden? Henz Media hat Sie!

Angebot anfordern

Unverbindlich & kostenlos

Icon Angebot anfordern 70x70Vereinbaren Sie jetzt ein Beratungsgespräch und erhalten Sie ein völlig unverbindliches Angebot. Zum Formular

Ihre Webseite

Eindruck hinterlassen

Icon Webseite erstellen 70x70Der erste Einduck zählt. Dies gilt insbesondere für die Außendarstellung im Web. Henz Media erstellt günstige und professionelle Webseiten.

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen Ok