Menu
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?
927
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.
65
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');
}
}
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
