Wednesday, October 1, 2008

Joomla! + jQuery = "el.set is not a function"

Storytime: Joomla! has a best friend (BFF) called mootools. Along comes the jQuery and tries to get in on the BFF action by stealing Joomla!'s friendship away from mootools. There is a fight. jQuery pushes mootools, mootools falls over, mootools boo-hoos dramatically to the teacher (mostly Internet Explorer) and then Joomla! looks bad for not having decided initially to only ever have one friend. It's quite the pitiful story actually.

$ is the Root of All Evil
The reason this error occurs is that both jQuery and mootools use the $-function. Thus in order to implement jQuery in with Joomla! without changing the later you have to override jQuery's $-function. You can do so by using jQuery.noConflict():

<jdoc:include type="head" />
<script type="text/javascript"
<script type="text/javascript">

Using this fix will cause all jQuery $-functions to malfunction. You will need to convert them all to jQuery (e.g. $( document ).ready becomes jQuery( document ).ready ). Good luck!


Mike said...

Great! Fixed my conflict painlessly. (I ran into this with VirtueMart - the template used jQuery and VirtueMart's Ajax "Add-to-Cart" failed due to the conflict.) Thanks!

neelesh said...

Thanks for you help

anubhav said...

nice idea ....

anubhav said...

it works