Importing jQuery into Joomla

Question

I have been a Joomla developer for almost an year now. I have been struggling to import jQuery into joomla everyday. Joomla comes with mootools. When I import jQuery it crashes. Also when I create modules I have to import jQuery into each module which makes to site slow. Sometimes it makes the whole site crashes. I want both mootools and jquery to work hand in hand so I can use both without any crashes.

What's the best way to import jQuery into Joomla ? Is there a specific place where the import should be done to use one jquery library site-wide(both backend and frontend) ?

Thanks

Umbrage

Answer 1

This is the code we use to ensure only 1 copy of jQuery is imported. It simply checks to see if jQuery is already being imported and if not, then we import it :)

Joomla 2.5

<?php
  $app = JFactory::getApplication();
  if (!$app->get('jquery'))
  {
     $app->set('jquery', true);
     JFactory::getDocument()->addScript(JUri::root() . 'templates/template_name/js/jquery.js');
  }
?>

Joomla 3.x (no conflict mode):

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

Joomla 3.x (normal mode):

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

You need to insert this code into the index.php of your template, preferably near the top so you remember where it is. If you do not wish to override your template's index.php file, then you can also develop a small Plugin

Update:

As Bobby stated. A lot of extensions include their own copy of jQuery and a lot of them don't use this method and thus causes conflicts. All I know is that any good developer should know that multiple jQuery libraries causes conflicts and should use this code.

Starkey

I like this - in which file do you include it? Also worth noting that quite a few joomla extensions include their own version of jQuery. – Wirer

The problem is that not every developer knows about it if(!JFactory::getApplication()->get('jquery')).Is there any official documentation in joomla website about this?? if not joomla should put it. – Brainwash

Answer 2

This is a great plugin.

http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

This plugin is meant to help clean and resolve front and back end issues when using instances of jQuery alongside the Mootools libraries.

WHAT IT DOES OUT-OF-THE BOX

• calls jQuery and jQuery UI libraries from the Google CDN (with or without protocol) - but you can do it locally too,
• places jQuery libraries after MooTools calls for perfect compatibility,
• adds the noConflict() code alongside the jQuery library call,
• strips out extra jQuery and jQuery UI libraries, including the noConflict() calls added by other modules or plugins,
• lets you choose jQuery UI basic styling or custom theme.

WHAT YOU CAN TWEAK

• disable MooTools libraries tentatively in the frontend,
• enable or disable the plugin in specific portions of the site, from template to single page,
• use reporting to get feedback on what the plugin engine has done,
• add or remove scripts and stylesheets,
• strip blank lines left by the modifications made to the page,
• prevent some libraries to be stripped out,
• modify the way the engine works by default (do not add or remove noConflict() code...),

Umbrage

Thanks for coming back and pointing this out. What is your experience with this plugin? was it good? – Psychometry

Answer 3

Use Joomla! 3.0 — if you've spent that long trying you should help out with the Joomla! JavaScript Working Group which was built to address this.

Cricoid

"Use X" is never a great answer to "How can I use Y to ..." questions. And even if 3.0 does magically solve the problem, it would be nice to have some detail as to how. – Wirer

So @BobbyJack did you read the link? Like most people we've found the problem is not really fixable in pre-3.0 as there is no framework support and users install "custom" extensions/plugins/templates/modules that load all sorts of crappy out-dated JS libraries (including jQuery) and there is no way to stop them or check if a library is loaded. There is no "correct way" to do it yet. My bad for pointing to a link that deals specifically with this subject. – Cricoid

@cppl: Fair enough. Admittedly, I didn't read the full text of that link - I just get frustrated with answers that essentially refute the original question. And, yes - as per my other comment - I'm aware of badly programmed extensions that include their own version of jQuery, and even more frustrated by that behaviour ... – Wirer

@BobbyJack I understand frustration, I get it everytime I see this question on SO (about every other week...) Cheers - Craig – Cricoid

Answer 4

In Joomla 3.x JApplication doesn't extend from JObject anymore which means when you want to use the same code in your extension for Joomla 2.5 and Joomla 3.x then you have to write the if condition like

if (!version_compare(JVERSION, '3', 'ge') && !JFactory::getApplication()->get('jquery', false)) {

Otherwise it will crash!! An example can be found here https://github.com/Digital-Peak/DPExtensions/blob/master/mod_dpslider/tmpl/default.php#L13

Colas