Theme Joomla Tips and Advice

Running mootools and jQuery side-by-side

If you are running both the mootools and jQuery JavaScript libraries on your website and are getting JavaScript conflicts this tutorial will show you how to correctly set up the two JavaScript libraries in your template and it will allow you to have an endless amount of mootools and jQuery powered extensions running on your website.

This process might seem daunting but there are actually only two things you need to do here: Adding 4 lines of code before and removing all the calls to the mootools and jQuery framework libraries. Just follow these steps:

• Firstly, we have to remove all calls to the mootools and jQuery framework library files:
• Some extensions have an option to Enable or Disable the call to mootools and/or jQuery framework file.
• If so, great! Just set those to Disabled. In Kupo Slides Pro for example, you can disable the jQuery library call - In the Kupo Control Panel go to Extension Manager and click on settings for Kupo Slides Pro and set Use Included jQuery to No.
• If not, then you are going to have to manually dig into the code and remove them. Inside your template's index.php file search for 'mootools.js' or 'mootools-core.js' and 'jQuery.js' or 'jQuery.min.js' or something to that effect and you must remove the entire line. For extensions such as components, modules and plugins they are usually called in the main php file which should be the same name as the extension (i.e. Kupo Slides Pro has a module called mod_kuposlidespro and there is a file called mod_kuposlidespro.php - this file normally has the call to the mootools or jQuery framework file).
• Here are a few examples of how they might look:
  

  <script type="text/javascript" src="media/system/js/mootools-core.js"></script>

  <script type="text/javascript" src="media/system/js/mootools-more.js"></script>

  <script type="text/javascript" src="templates/bedrock/js/jquery.min.js"></script>

• Now open up your template's index.php file.
• Search for <jdoc:include type="head" /> and add the following just before it:
  

  <?php $this->_scripts = array(); ?>

  <script type="text/javascript" src="/plugins/system/mtupgrade/mootools.js"></script>

  <script src="[path_to_jquery_file]/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">jQuery.noConflict();</script>

  
  Remember to set the '[path_to_jquery_file]/jquery.min.js' to your jQuery framework path. Best to set it to your template's jQuery file. If the template does not call jQuery then use the path to one of your extensions
  e.g.

  <script src="modules/mod_kuposlidespro/js/jquery/jquery.min.js" type="text/javascript"></script>

That is it! You should be able to install and run multiple mootools or jQuery powered extensions on your website without hassle.