Prevent jQuery and MooTools conflicts in Joomla


Jquery and mootools both are popular JavaScript library and Joomla developers often use both. when you want to use both in joomla module or joomla component then remember the point is that mootools library must be loaded before jquery. So far not a big deal, but without forcing mootools to be loaded first there is a chance that your jquery code will be conflict the code.

To prevent that, just put this line at the top of your component entry point file (component.php):

In Joomla 2.5

JHTML::_('behavior.mootools'); // this code make sure that mootools loads first
your code here

In Joomla 3 and later

JHtml::_('behavior.framework');// this code make sure that mootools loads first
your code here

Now in your jQuery plugin, return the jquery handler.

var jQ = jQuery.noConflict(); // now use jQ instead of $ symbol
your code here

or just the below code

jQuery.noConflict(); // this will keep using the $ symbol
your code here

Now everything is set, you can use both liabrary in your code.

Enjoy Coding!!


Useful Links
http://api.jquery.com/jQuery.noConflict/
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
http://docs.jquery.com/Core/jQuery.noConflict
http://www.w3schools.com/jquery/jquery_noconflict.asp

Advertisements

5 thoughts on “Prevent jQuery and MooTools conflicts in Joomla”

  1. Hello,

    I can not agree that mootools have to be loaded first. I think, that with this loading order you can not guarantee right functionality for every mootools script.

    jQuery should be loaded first.

    jQuery.noConflict();

    This will help you to load jQuery first and you turn it to no conflict mode before initialization of mootools. It should be more correct and you will be able to use functionality of both frameworks without any problem.

    Then if you use external jQuery script which is using $, you can easily mark part of code, where $ will be used for jQuery framework:
    (function($){

    // $ will be used for jQuery here

    })(jQuery);

    Isn’t that true?

    1. Ok, my comment is not complete, html tags was removed. So I will try to explain it with different way.
      You can load jQuery first by adding link to it immediately after head tag. Then you can turn jQuery into non conflict mode by jQuery.noConflict();.
      After that you can add Joomla tag jdoc:include type=”head”. It will load header of html document generated by Joomla, so mootools will be loaded after jQuery.

    2. Hi,
      As both js framework (jQuery and MooTools) use $ symbol to implement its functionality, we need to maintain prevents conflict.
      jQuery provide us a method jQuery.noConflict() which return back $ symbol so other js framework able to keep using $ symbol in their code. That is the main reason to add mootools first in Joomla to prevent conflicts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s