Mootools and jQuery conflicts in Joomla 1.5

Jun28
  • Share

Difficulty: ★★☆☆☆

Yes, Mootools and jQuery can conflict each other, when you load both on your page.
Ofcourse, they can use same method names, therefore one of both could break.
In my case, I received in Joomla 1.5 errors for removing handlers.

See, I’m a fan of jQuery, that doesn’t say that I dislike MooTools, but when you create a nice Template for Joomla 1.5 and you decide to use jQuery, the hell breaks open when implementing:

<jdoc:include type="head" />

This, is because Joomla 1.5 uses MooTools and Caption javascript frameworks, for the backend admin panel, but also some components may require it.
In this case I would say, fuck it. – I want to have my own choice of which framework I would like to use.
So stick together with jQuery and wrote the following lines in the top of my index.php template:

$headerstuff = $this->getHeadData();
$headerstuff['scripts'] = array();
$this->setHeadData($headerstuff);

Goodbye MooTools and Caption frameworks. – My conflicts are solved!

, / , / , / , /

  » 5 Comments, post your comment now. »
Posted in javascript, jquery, opensource |

5 Responses to “Mootools and jQuery conflicts in Joomla 1.5”

Joomla 1.6 will be using MooTools 1.2.3 framework which doesn’t steal the $ function form the jQ toolkit.

Oskar Krawczyk on June 28th, 2009 at 1:16 PM

Thanks for the update Oskar! I’m thinking about writing a new blog entry, since I recently found to many conflicts in Joomla plugins, because components use all different kind of javascript frameworks next to each other. – In my opinion the choice of a Javascript framework should not be the choice of a program or plugin, but the choice of the developer. Just like how we decide if we create a PHP or ASP site, or use Adobe Flash or Silverlight. We don’t use both.

Lee on June 28th, 2009 at 4:08 PM

Did you know JQuery has the possibility to use an alternative for $ in order to avoid conflicts?
For example:
jQuery.noConflict();
jQuery(”#id”).doSomething();
or:
$j = jQuery.noConflict();
$j(”#id”).doSomething();
See also:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Regards,
Maurice

Maurice on January 11th, 2010 at 8:22 PM

Thanks Lee, you solved my problem.

This was great technique to disable Mootools from index.

Thanks you very much.

shahzad on July 17th, 2010 at 4:54 PM

Hey Lee,

I had a problem with my website. I got two error message,one regarding jquery.min.js and another one on mootools.js. I’ve added the header stuff like you said and the error on mootools.js is gone. However, I still have the error on jquery.min.js. It says Error on page. Object is required, jquery.min.js. Do you have any idea what this means?

laily on May 8th, 2011 at 4:54 PM

Leave a comment