10

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?

13

You should call

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

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

  • This was the only solution that worked for me - placed in mod_tiles.php this forced jQuery to load first. Thank you! – codinghands Jun 10 '14 at 5:04
  • 1
    @codinghands docs.joomla.org/… – Ville Niemi Dec 14 '14 at 17:50
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.

  • The only change I made here was to add the assets folder - this made no different, and the scripts still load before jQuery does. I also wonder about the wisdom in putting this kind of code in a template file (particularly if there are multiple templates using the same scripts, DRY etc etc.) – codinghands Jun 10 '14 at 5:01
  • Hem, your comment is weird -> "putting this kind of code in a template file ". I was, and maybe it was not clear enough, talking about a module developed by you and based on isotope.js and other JS scripts. I am very sorry if I was wrong and you are actually using a third party module called mod_tiles. BTW, there are other ways to insert JS scripts in a template. – ghazal Jun 11 '14 at 9:19
  • Sorry, I didn't mean to sound so harsh haha! Must of been up too early... You are exactly right, that is what I'm doing - it's my module. What I meant by template file was default.php in the tmpl (template) folder of the module. I would of thought scripts should be loaded in mod_tiles.php (the 'controller') rather than default.php (the view). – codinghands Jun 12 '14 at 2:26
  • Placing it in a tmpl/default.php allows overrides. In mod_tiles.php it can't be overridden. – sovainfo Dec 14 '14 at 23:09
2

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!

  • This a module with only mod_tiles.php, a helper.php file and a single template (default.php) in tmpl. I tried adding the scripts in both mod_tiles.php and default.php - both load before jQuery. – codinghands Jun 10 '14 at 5:01
0

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

0

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();
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.