Loading jQuery before other Javascript in Joomla 3

StackOverflow https://stackoverflow.com/questions/13078383

Question

I'm adapting a custom component to Joomla 3. It relies on jQuery, which I previously loaded in myself. Now that it's included in the base template, I don't need to. However, my custom javascript that relies on jQuery is being loaded first. I load them using the following form:

$document = JFactory::getDocument();
$document->addScript( PATH TO SCRIPT);

This properly includes them in the <head> element, but they are loaded before jQuery.

Some quick searching reveals abstract class JHtmlJquery in libraries/cms/html/jquery.php but I'm unsure of from where this is called.

How can I change the load order so that jQuery is loaded before my scripts that depend upon it? And can I do this without getting into the core code?

Was it helpful?

Solution

I found a solution. I didn't want both the template as well as the components to load bootstrap, plus on pages that are just single articles that load some modules, I didn't want to have each module load bootstrap as well.. (I mean this is getting a bit ridiculous..) So I decided to take bootstrap out of the template completely and I built a system plugin that just loads bootstrap and then I set the loading order of the plugin to load first. Works great..

// Bootstrap Loader


    jimport('joomla.plugin.plugin');

    class plgSystemBootstrapLoader extends JPlugin {

        function onAfterRoute() {

            // Load Bootstrap
            JHtml::_('bootstrap.framework');
            $document = JFactory::getDocument();
            $document->addStyleSheet('/media/jui/css/bootstrap.min.css');
            $document->addStyleSheet('/media/jui/css/bootstrap-responsive.css');
        }

    }

OTHER TIPS

Mario's answer is going in the right direction, but it doesn't quite do it. It turns out, you must include the code for JHtml::('bootstrap.framework'); within your component (not just the template files) before loading additional scripts. I was using the stock J3 template, protostar, which includes the twitter bootstrap in its template index.php.

The code for my custom view.html.php is now as follows:

class MyView extends JViewLegacy
{
    function display($tpl = null)
    {
        $document = JFactory::getDocument();
        JHtml::_('bootstrap.framework');

        $document->addScript( PATH_TO_SCRIPT );

        ...
    }
}

This behaves as expected and the jQuery and Bootstrap files (jquery.min.js, jquery-noconflict.js, and bootstrap.min.js) are included in the <head> before my custom scripts.

What template are you using? In J3 it's a common sense to load the jQuery platform at the bottom of the page, so that the pages load faster. Look in your template for JHtml::_('bootstrap.framework'); // Loads the jQuery js scripts and try to load your js after this.

Joomla probably writes the scripts and css files included in the $document->addScript( PATH TO SCRIPT); manner in the order they are added by executing component and module code.

I've searched a little but couldn't find a way to influence the loading of seperate declarations or jQuery. But I can offer an other solution.

I can't say I'm certain this will be THE solution to your problem, because I haven't got a clue as to what your code does, or when it needs to do something. So I'm coming in with the broadest fix possible ;)

This will work, as long as your code won't have to be active before page ready.

Wrap your custom code in a js on ready statement, so it won't do anything until the page ( and consequently jQuery has been loaded ).

if (document.readyState === "complete") { 
    DoYourStuff(); 
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top