Loading jQuery before other Javascript Libraries

This forum is for general questions about extensions for Joomla! 3.x.

Moderators: pe7er, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
benmillerj
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Wed Aug 24, 2011 9:59 pm

Loading jQuery before other Javascript Libraries

Post by benmillerj » Thu Oct 25, 2012 10:17 pm

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:

Code: Select all

$document = JFactory::getDocument();
$document->addScript( PATH TO SCRIPT);
They are properly included in the header, but they are loaded before jQuery.

Can anyone direct me toward the place where I could change the load order of these libraries? Is it now in an plugin, since jQuery seems to be loaded by default?

Thanks.

User avatar
cheetooh
Joomla! Explorer
Joomla! Explorer
Posts: 259
Joined: Tue Sep 19, 2006 10:51 am
Location: Malaysia
Contact:

Re: Loading jQuery before other Javascript Libraries

Post by cheetooh » Sun Oct 28, 2012 7:56 am

Just check your template. Look for the following code in your template

Code: Select all

<jdoc:include type="head" />
This is the placeholder for your javascript.
"Whether you're a programmer or a seamstress, it's all about new techniques, simplifying old techniques, and consolidating steps. Making things go faster -- but not worse. Better."
— Martha Stewart for Wired

RedEye
Joomla! Ace
Joomla! Ace
Posts: 1460
Joined: Sat Jan 21, 2006 8:42 pm

Re: Loading jQuery before other Javascript Libraries

Post by RedEye » Sun Oct 28, 2012 8:31 pm

benmillerj wrote:They are properly included in the header, but they are loaded before jQuery.
I also run into this today :-\
I only loaded a js file in my template with the addScript method, the fix was to add JHtml::_('bootstrap.framework');
before the addScript call, then the odering was ok.
This also works for components, set JHtml::_('bootstrap.framework'); before your addScript call and the ordering is ok.
weird in my eyes...
cheetooh wrote:Just check your template. Look for the following code in your template

Code: Select all

<jdoc:include type="head" />
This is the placeholder for your javascript.
This is the placeholder for the complete header, not only the js, and it has nothing to do with the problem

User avatar
cheetooh
Joomla! Explorer
Joomla! Explorer
Posts: 259
Joined: Tue Sep 19, 2006 10:51 am
Location: Malaysia
Contact:

Re: Loading jQuery before other Javascript Libraries

Post by cheetooh » Mon Oct 29, 2012 2:11 am

Whenever you use

Code: Select all

$document = JFactory::getDocument();
$document->addScript( PATH TO SCRIPT);
it will be loaded into

Code: Select all

<jdoc:include type="head" />

this is what i meant
"Whether you're a programmer or a seamstress, it's all about new techniques, simplifying old techniques, and consolidating steps. Making things go faster -- but not worse. Better."
— Martha Stewart for Wired

benmillerj
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Wed Aug 24, 2011 9:59 pm

Re: Loading jQuery before other Javascript Libraries

Post by benmillerj » Mon Oct 29, 2012 4:54 am

RedEye wrote:I also run into this today :-\
I only loaded a js file in my template with the addScript method, the fix was to add JHtml::_('bootstrap.framework');
before the addScript call, then the odering was ok.
This also works for components, set JHtml::_('bootstrap.framework'); before your addScript call and the ordering is ok.
weird in my eyes...
Should I do this in every component that uses jQuery or is there a way to set a global default? Also, where is the most proper place to include this? Perhaps in the view.html.php?

RedEye
Joomla! Ace
Joomla! Ace
Posts: 1460
Joined: Sat Jan 21, 2006 8:42 pm

Re: Loading jQuery before other Javascript Libraries

Post by RedEye » Mon Oct 29, 2012 9:04 am

benmillerj wrote:Should I do this in every component that uses jQuery or is there a way to set a global default? Also, where is the most proper place to include this? Perhaps in the view.html.php?
My guess is that you need to do this in every component which uses jquery... but not tested it.
Proper place would be the layout files, but view.html.php will also work.

benmillerj
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Wed Aug 24, 2011 9:59 pm

Re: Loading jQuery before other Javascript Libraries

Post by benmillerj » Mon Oct 29, 2012 3:58 pm

RedEye wrote:Proper place would be the layout files, but view.html.php will also work.
I tested both options. Placing

Code: Select all

JHtml::_('bootstrap.framework');
in the layout file has no affect. However, placing it in view.html.php before loading the other resources has the desired affect.

My working code is as follows

Code: Select all

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

        $document->addScript( PATH_TO_SCRIPT );

        ...
    }
}
My custom script is now included after jquery.min.js, jquery-noconflict.js, and bootstrap.min.js (the standard libraries for Twitter Bootstrap).

kharddie
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Thu Nov 06, 2008 12:04 am
Location: australia

Re: Loading jQuery before other Javascript Libraries

Post by kharddie » Thu Nov 01, 2012 11:39 am

Just had the same problem with js files loading before mootools. I have tried your fix and i get a blank Error: 500 page. am using joomla 2.5

Code: Select all

$document = JFactory::getDocument();
JHtml::_('bootstrap.framework');
$document->addScript('media/com_helloworld/js/kgeocoding.js');
?

any idea why?
Thanks

RedEye
Joomla! Ace
Joomla! Ace
Posts: 1460
Joined: Sat Jan 21, 2006 8:42 pm

Re: Loading jQuery before other Javascript Libraries

Post by RedEye » Thu Nov 08, 2012 2:58 am

Maybe because you try to use a function what does not exists in Joomla 2.5, try
JHtml::_('behavior.framework', true); <-- with mootools more
JHtml::_('behavior.framework'); <-- without

dtsecurity
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Nov 12, 2012 2:48 am
Location: Viet Nam
Contact:

Re: Loading jQuery before other Javascript Libraries

Post by dtsecurity » Mon Nov 12, 2012 2:58 am

cheetooh wrote:Whenever you use

Code: Select all

$document = JFactory::getDocument();
$document->addScript( PATH TO SCRIPT);
it will be loaded into

Code: Select all

<jdoc:include type="head" />

this is what i meant
this for me, thanks


Locked

Return to “Extensions for Joomla! 3.x”