Jhtml::script order - how to postpone until jQuery has been loaded?

Question

I use JHtml::script to add scripts to my pages in a custom-developed module. However, these scripts are injected into the head before J3 adds in jQuery - for example:

<!-- my module js -->
<script src="/modules/mod_tiles/js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="/modules/mod_tiles/js/jquery.hoverintent.min.js" type="text/javascript"></script>
<script src="/modules/mod_tiles/js/mod_tiles.js" type="text/javascript"></script>
<!-- then joomla loads jQuery --->
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>

How can I force Joomla to load jQuery before any other scripts?

Answer 1

You should call

JHtml::_('jquery.framework');

before your other JHtml::script. AFAIK this makes sure that jQuery is loaded first.

Answer 2

if I read your question correctly, you are developing your own module.

Try this, in default.php - the view of the module (in "tmpl" ):

JHtml::stylesheet('modules/'.$module->module.'/assets/css/yourfile.css');

JHtml::script('modules/'.$module->module.'/assets/js/yourscript.js');

Or this :

JHtml::_('stylesheet', 'modules/'.$module->module.'/assets/css/anotherfile.css');

JHtml::_('script', 'modules/'.$module->module.'/assets/js/othercript.js');

In both case, your JS file(s) should be injected after jQuery, providing that you created an "asset" folder, and a "css" and a "js" folder inside.

The second solution is more in accordance with joomla 3.X.X API.

Hope it helps.

Answer 3

I ran into this problem last week and it was related to where I was calling JHtml::script. Are you doing this in your view or the view's template? If you try to add the scripts in the view itself (views/yourview/view.html.php) they will be inserted before Joomla!'s own scripts, but if you add the scripts in the template (views/yourview/tmpl/default.php) they will be inserted after Joomla!'s scripts.

Good luck!

Answer 4

This is probably due to the method that the developer of mod_tiles has used to import the scripts. I assume they haven't stuck to Joomla coding standards in this situation.

You have 2 options (that I can think of) hwre:

1. If the scripts are being imported from a file within the tmpl folder within the module, you can perform a Template Override and change the way the script are being imported, using JHtml.
2. You can download and install jQuery Easy which is a plugin that imports jQuery and places it above all other scripts.

Hope this helps

Answer 5

I wanted to add my two-bits after the fact. I've got a couple of scripts and style sheets that need to be loaded for every view that we have in the component, and wanted a single point to have that happen insuring also that they're loaded in the correct sequence.

In the file components\myComponent\mycomponent.php:

defined('_JEXEC') or die;

// Include dependancies
jimport('joomla.application.component.controller');

JHtml::stylesheet('http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css', array(), true);
JHtml::stylesheet('components/com_mycomponent/assets/css/mycomponent.css');

JHtml::_('jquery.framework');   // Make sure jQuery is loaded before component JS
JHtml::script( 'components/mycomponent/assets/js/jquery.cookie.js');

// Execute the task.
$controller = JControllerLegacy::getInstance('Mycomponent');
$controller->execute(JFactory::getApplication()->input->get('task'));
$controller->redirect();

Answer 6

I know this is an old topic but did you ever get to the bottom of this? I've just experienced the same problem. I have identified the CAUSE but not the problem/solution; I have a sneaky suspision that it is a BUG but could do with someone else trying it out.

Scenario: You have created a module that includes a jQuery dependant script so you use the following in your default.php view:

$doc = JFactory::getDocument();
$doc->addScript("media/mod_accordion/js/accordion.js");

You then install the module and give it a module position, lets say 'left'. When you look at the front end source code everything looks good, all the scripts load after the scripts that are included in

JHtml::_('bootstrap.framework');

HOWEVER if you give the module a position 'accordion' and use the joomla loadposition feature to add the module to an article

{loadposition accordion}

then accordion.js gets added BEFORE the bootstrap.framework files.

The only way I have been able to bodge it to work is to add the script as an inline script rather than being included in the head.

EDIT: same goes for including the css; it is being added to the top of the list of css declaration (before the template and bootstrap css files). The bodge for this is to add !important to the css declarations.