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.

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.