Joomla Mootools and jQuery Compatibility

Details: Category: Joomla; Published on Monday, 21 May 2012 11:31; Written by Administrator; Hits: 2980

In this series of post I will outline some common techniques to help Joomla extensions development.

As you know Joomla is shipped with Mootools library which assign $ also to Ajax. Here is 2 tips that will allow you to use jQuery scripts without any modifications (most of the time you will find tips to assign jQuery to something else than $ and rewrite your scripts)

First it is recommended to include always mootools first to avoid jQuery conflict issues

JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addScript(JURI::root() . "media/com_cedtag/js/jquery.1.7.2.min.js");

then to run jQuery in noConflict mode. Note that here I do not assign jQuery to any alias.

$document->addScriptDeclaration("jQuery.noConflict();");

Till here, this is what you will find on all Joomla forums, posts over the internet. The last tips is what make the difference!

Instead of using a different alias for the jQuery object (when using noConflict), you can write your jQuery code by wrapping it all in a closure. This can be done in the document.ready function

$script = "jQuery(function($) {
              $();
       });";
$document->addScriptDeclaration($script);

This way you are not force to rewrite your scripts to use another alias (replacing $ with jquery alias for example in all your scripts). This make inclusion of jQuery really easy!

Happy Coding!