Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review
Details
Category: Tutorials
Hits: 77550
27Mar2023
Information
Print

Solve jQuery/jQuery and jQuery/MooTools conflict issues with the jQuery Easy plugin

Information
First published April 10, 2012
77550 hits -
 

Over the past few months, a large number of users have asked my help in finding out what was wrong with their website, even after installing the jQuery Easy plugin.

In this article, I will try and address ways of fixing these issues, with the help of the plugin.

What the plugin IS NOT:

  • a miracle solution that fixes all your issues with magic
  • a harmfull extension that erases code irreversibly

What the plugin IS:

  • a way of properly adding jQuery and jQuery UI libraries to the front and back ends of your website and prevent conflicts with the MooTools libraries
  • a solution that removes unnecessary multiple occurences of the jQuery libraries

Warning: if you are foreign to what jQuery is (and MooTools for that matter), the following explanations probably won't make any sense to you. There are a multitude of articles online that can help you find out what these libraries are. I strongly suggest you educate yourself on the matter if you want to go any further... And maybe you need a professional eye to look into your website issues.

If you want to try jQuery for yourself, the jQuery Easy plugin is the perfect tool to install the needed libraries. Use a third-party extension to include javascript code into your site. Such extensions can be found on this site (in the template companions download section).

Removing jQuery compatibility issues

Step 1 - Identify which extensions require the jQuery library to work

Step 2 - For each extension found at Step 1, find out what version of the jQuery library they use

Clues on how to find out the version:

  • the included libraries look like jquery-1.3.2
  • the extension calls a specific online version identified in the <head> tag of your website
  • the extension gives you the choices on jQuery in its parameters

When all that fails, check on the extension's website and/or documentation.<br/ > The last resort is to contact the developer himself.

Step 3 - The extension with the higher library version will be the version of reference. Set the version of the jQuery library in the jQuery Easy plugin to that version number (for instance, if the highest version number you have found is 1.6.3, use 'jQuery v1.6 (latest)' from the jQuery version field. 

Step 4 - Test each extension found in Step 1 that has a smaller version number than the one of reference to make sure it still works under that version (may have compatibility issues)
How to do this:

  • check if there is an update to your extension already with an updated jQuery library version
  • ask the developer if he can ensure his extension is compatible with your version of the jQuery library
  • isolate the extension and try it out with the new version (for instance, on a separate template, use jQuery Easy plugin and only that extension)

Only then you can be ensured that all your extensions are going to work with your version of reference.

Note: check if there is an option to disable jQuery in your extensions. If so, disable jQuery from them (once again, make sure the extensions still work with the jQuery easy version selected)

But wait, I still have issues. How come?

jQuery Easy cleans up the jQuery libraries but modifications may need to be done over script declarations.
Remaining code can still be in conflict, either with other jQuery code or MooTools code.

You will need to inspect every javascript file and every script declaration that shows up in the <head> section of your website.

If you find code like this:

$(document).ready(function(){
     $("div").hide(); // picked up by jQuery and MooTools
});

replace it with:

jQuery(document).ready(function($){
     $("div").hide(); // picked up by jQuery only
});

or

jQuery(document).ready(function(){
     jQuery("div").hide(); // picked up by jQuery only
});

Acceptable javascript code

var $j = jQuery.noConflict(); // Use jQuery via $j(...)
     $j(document).ready(function(){
     $j("div").hide();
});
var $k = jQuery.noConflict(); // Use jQuery via $k(...)
     $k(document).ready(function($){
     $("div").hide();
});
jQuery.noConflict()(function(){ /* code using jQuery */ });
(function($) { /* some code that uses $ */ })(jQuery)

Other potential issues

Problem: you have a version of the jQuery library hidden by the extension's or template's maker.

For instance, /cache/template/gzip.php?jquery-f8baf168.js is actually a jQuery library, but it has not been detected by jQuery Easy because of it's inconventional naming.

Solution: add the path to the Strip remaining scripts field in the plugin.

Problem: some jQuery UI CSS has been added by an extension with a different naming convention.

For instance, you spotted www.figster.co.za/media/sobipro/css/jque...hness/smoothness.css in the code source of your website.

Solution: add the path to the Strip remaining CSS field. Select the jQuery UI theme needed for that extension (here: smoothness) in the plugin.

Information