, , ,

jQuery + MooTools The Joomla! 3 core ships with jQuery, and previous Joomla! versions did not. In the past, developers like us had to include a custom call to load jQuery, whenever it was needed. Most of the time it used to throw ugly error messages, due to conflicts with other included JavaScript libraries. Finally, Joomla! 3.0 has introduced jQuery as a core feature. It is like two power houses coming together…such a bliss. Now, third party extensions no longer require to load jQuery, because it is already shipped with Joomla! 3. It saves hell lot of time to make things work for us.
Note: An online statistics says that more than 50% of the 10,000 most visited website use jQuery for better graphic representation.

Some quick tips/ facts on using jQuery, how to avoid conflicts and to use jQuery along with other javascript libraries in Joomla! 3:

  • While using Third Party Extensions the only thing that extensions require is a simple call to the JHtml-class:JHtml::_(‘jquery.framework’); to load jQuery
  • MooTools is prototype-based and jQuery is not, therefore jQuery and MooTools may be used together on the same page.
  • The conflicting part of jQuery and MooTools is the use of the $. By default, jQuery uses $ as a shortcut for jQuery. Thus, if we are using another JavaScript library that uses the $ variable, we can run into conflicts with jQuery.
    • In such cases, “$(document).ready” indicates that even though we have set jQuery.noConflict() – our jQuery scripts aren’t using noConflict code.
    • So we need to change this line:
      $(document).ready(function() {
      jQuery(document).ready(function($) {
  • We can use jQuery.noConflict() to avoid conflicts of jQuery with other JavaScript libraries. The best way is to put jQuery in no-conflict mode immediately after it is loaded onto the page and before any attempt to use jQuery in the page.
    • There can be different ways to use this no-conflict mode. While putting jQuery into no-conflict mode, we can assign a new variable name to replace the $ alias.
      var $j = jQuery.noConflict();
      // $j is now an alias to the jQuery function
      // creating the new alias is optional.
      $j(document).ready(function() {
      $j( "div" ).hide();

      We can use the full function name jQuery as well as the new alias $j in the rest of the application.

    • Also if you really like to use $ and don’t care about using the other library’s $ method (like me) then we can simply add the $ as an argument passed to the jQuery( document).ready() function jQuery.noConflict();
      <script type="text/javascript" src="jquery-1.3.js"></script>
      <script type="text/javascript">
      //no conflict jquery
      //jquery stuff
      (function($) {
      $( "div" ).hide(); 
      // use the locally-scoped $ in here as an alias to jQuery.
      <script src="other_lib.js"></script>
      //Other code using $ as an alias 
      //to the other library can follow here
  • If we want to use both jQuery and MooTools in joomla module or joomla component or in some library autoloading script, then we must load mootools library before jquery. We need to include the following line at the top of the component entry point file:
    var jQ = jQuery.noConflict(); 
    // use jQ instead of $ symbol in the code here
  • Obviously, including two libraries within the same page is resource-consuming but at times we may want to implement plugins from each library, so this may be a great option.
  • It will be a big shortcoming in the performance if we do not cache stuff. Saving jQuery in a variable so that jQuery won’t have to search for the required element again when we call it.

Enjoy (Smart) Coding!!!