Although the two libraries MooTools and jQuery can co-exist together, one problem remains as more and more such extensions are made available: each module, plugin, component or even template can come with its own version of jQuery. This can result in bloated loads of javascript libraries, can slow down the performance of your web site (because of a heavy resource consumption) and even create conflicts.
Note: in this article, we will only focus on the site and not the administration side of Joomla!.
One (partial) solution would be to load the jQuery library at the template level.
Three options are available:
- host a local copy of the library on the website server,
- load the library from the Google API website,
- load the library from the jQuery website.
Hosting a local copy of the jQuery library
It will require you download the version you want to use from the jQuery website.
Loading the library from the Google API website
You can take advantage of this library, as it has great bandwidth and will probably be faster to load than getting the copy from your server.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>Loading the library from the jQuery website
This solution gives you peace of mind if you want to stay current with the latest jQuery version, but will require you test your website every time a new one comes out.
<script src="http://code.jquery.com/jquery.min.js"></script>Entering the code into the template
Locate the following code in the template index.php file:
<jdoc:include type="head" />That line of code will, among other things, load the Mootools library. That library always need to be loaded before any other one. Therefore, add the script loading the jQuery library after that line.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>Now that the library is loaded from the template, it is necessary to make an inventory of the extensions using jQuery in the creation of your website. Make sure all extensions are compatible with your version of jQuery and that they do not 'break'.
Some extensions have the built-in option to disable their own copy of the library. Just go to the parameter page and disable their local copy of jQuery. An easy check would be to run the website and see if the functionnality still works!
Other extensions are not as flexible. There is not much you can do other than looking through the code and make a few modifications... or leave it at that... Remember that modifying an extension's core can become a headache when it comes to updating it for every new release...
