How to load jQuery plugins AFTER jQuery for Joomla 3.0?

For Joomla! 3.x Coding related discussions, you could also use: http://groups.google.com/group/joomla-dev-general

Moderator: ooffick

Forum rules
Locked
awasen
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Sat May 30, 2009 9:09 am

How to load jQuery plugins AFTER jQuery for Joomla 3.0?

Post by awasen » Wed Nov 21, 2012 12:12 pm

How can I include jQuery dependent scripts after Joomla has loaded jQuery?

Using JHtml::script() my scripts are added before Joomla's loading of jQuery causing a JavaScript error. As a work-around I am now using "echo" to include the scripts but as I allow several modules on the same page I must only include it on the top-most one which I don't know which is...

There must be a way to get round this using JHtml::script or similar, right?

Regards,
Anders

gmort
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Mon Sep 24, 2012 6:52 pm

Re: How to load jQuery plugins AFTER jQuery for Joomla 3.0?

Post by gmort » Fri Nov 30, 2012 7:22 pm

JHtml::script() adds a javascript to an array which is processed in first in/first out order.

Therefore if something further on in the process decides it needs jQuery, then jQuery will be added then.

For just jquery, use:

Code: Select all

JHtml::_('jquery.framework',  true, true);
followed by your plugins:
// some plugin located at _basePath/js
JHtml::_('script',$this->_basePath.'jquery.plugin.js', false, true, false, false);
For jquery-ui you can skip the call to the framework, the ui will automatically add the framework before it calls itself:
IE

Code: Select all

// Joomla JQuery UI consists of
// core, widget, mouse, and position
// sortable is included as a seperate module
// pass core or sortable or both in the array to specify which ones
JHtml::_('jquery.ui',  array('core', 'sortable'), true);
// the button ui can be problematic!
JHtml::_('script',$this->_basePath.'jquery.ui.button.js', false, true, false, false);

Finally, if including the bootstrap framework, then it will load jquery then bootstrap

Code: Select all

JHtml::_('bootstrap.framework');
// some plugin located at _basePath/js
JHtml::_('script',$this->_basePath.'jquery.plugin.js', false, true, false, false);

Note: bootstrap and the jquery-ui buttons plugin have known conflicts. Whichever file is loaded LAST will be the one used. IE:
Finally, if including the bootstrap framework, then it will load jquery then bootstrap

Code: Select all

JHtml::_('bootstrap.framework');
// Joomla JQuery UI consists of
// core, widget, mouse, and position
// sortable is included as a seperate module
// pass core or sortable or both in the array to specify which ones
JHtml::_('jquery.ui',  array('core', 'sortable'), true);
// the button ui can be problematic!
JHtml::_('script',$this->_basePath.'jquery.ui.button.js', false, true, false, false);
jquery-ui button will be the button module in use, bootstrap javascript will be disabled

Code: Select all

// Joomla JQuery UI consists of
// core, widget, mouse, and position
// sortable is included as a seperate module
// pass core or sortable or both in the array to specify which ones
JHtml::_('jquery.ui',  array('core', 'sortable'), true);
// the button ui can be problematic!
JHtml::_('script',$this->_basePath.'jquery.ui.button.js', false, true, false, false);
JHtml::_('bootstrap.framework');
Bootstrap button code will be active, jquery-ui button is disabled.

To get both to work for most apps, load bootstrap, then the ui, then the buttons, and finally a modified bootstrap button script with different function names.
https://gist.github.com/4177778

User avatar
Duke3D
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Thu Nov 06, 2008 6:49 pm
Location: Park City, UT, USA

Re: How to load jQuery plugins AFTER jQuery for Joomla 3.0?

Post by Duke3D » Sun Dec 23, 2012 1:28 am

Gary -

Thanks for this ...

adding

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

to a plugin was all that was necessary to get it to load in correct order in J!3

/Duke


Locked

Return to “Joomla! 3.x Coding”