Loading jQuery before other Javascript in Joomla 3
-
14-07-2021 - |
Domanda
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?
Soluzione
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');
}
}
Altri suggerimenti
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();
}