Joomla Development – eigenes Javascript nach jQuery und Bootstrap laden

Joomla wird in der Version 3.3.6 mit dem Template Protostar eingesetzt. Für ein eigenes Plugin wird Javascript bzw. jQuery benötigt. Dies habe ich wie folgt eingebunden

$document = JFactory::getDocument();
$document->addScript(„media/plg_my-plugin/js/my-javascript-file.js“);

Das Script wurde nicht angewendet. Wenn man nun z.B. mit Firebug im Firefox nachsieht, dann sieht es wie folgt aus:

<script type=“text/javascript“ src=“/site/media/plg_my-plugin/js/my-javascript-file.js“>
<script type=“text/javascript“ src=“/site/media/jui/js/jquery.min.js“>
<script type=“text/javascript“ src=“/site/media/jui/js/jquery-noconflict.js“>
<script type=“text/javascript“ src=“/site/media/jui/js/jquery-migrate.min.js“>
<script type=“text/javascript“ src=“/site/media/system/js/caption.js“>
<script type=“text/javascript“ src=“/site/media/jui/js/bootstrap.min.js“>
<script type=“text/javascript“ src=“/site/templates/site/js/template.js“>
<script type=“text/javascript“ src=“/site/media/system/js/mootools-core.js“>
<script type=“text/javascript“ src=“/site/media/system/js/core.js“>
<script type=“text/javascript“ src=“/site/media/com_finder/js/autocompleter.js“>

Hier gut zu sehen, dass das eigene Script vor jquery und bootstrap geladen wird, was den Fehler:

ReferenceError: jQuery is not defined
jQuery(document).ready(function() {

in der Konsole anzeigt. Die Lösung ist im vor dem eigenen Script das Bootstrap Framework wie folgt zu laden:

$document = JFactory::getDocument();
JHtml::_(‚bootstrap.framework‘);

Dann sieht die Reihenfolge so aus

<script type=“text/javascript“ src=“/site/media/jui/js/jquery.min.js“>
<script type=“text/javascript“ src=“/site/media/jui/js/jquery-noconflict.js“>
<script type=“text/javascript“ src=“/site/media/jui/js/jquery-migrate.min.js“>
<script type=“text/javascript“ src=“/site/media/jui/js/bootstrap.min.js“>
<script type=“text/javascript“ src=“/site/media/plg_my-plugin/js/my-javascript-file.js“>
<script type=“text/javascript“ src=“/site/media/system/js/caption.js“>
<script type=“text/javascript“ src=“/site/templates/site/js/template.js“>
<script type=“text/javascript“ src=“/site/media/system/js/mootools-core.js“>
<script type=“text/javascript“ src=“/site/media/system/js/core.js“>
<script type=“text/javascript“ src=“/site/media/com_finder/js/autocompleter.js“>

und alles funktioniert wie es sollte.

JARVIS

Interessiert in verschiedenste IT Themen, schreibe ich in diesem Blog über Software, Hardware, Smart Home, Games und vieles mehr. Ich berichte z.B. über die Installation und Konfiguration von Software als auch von Problemen mit dieser. News sind ebenso spannend, sodass ich auch über Updates, Releases und Neuigkeiten aus der IT berichte. Letztendlich nutze ich Taste-of-IT als eigene Dokumentation und Anlaufstelle bei wiederkehrenden Themen. Ich hoffe ich kann dich ebenso informieren und bei Problemen eine schnelle Lösung anbieten. Wer meinen Aufwand unterstützen möchte, kann gerne eine Tasse oder Pod Kaffe per PayPal spenden – vielen Dank.