Print
Category: Tutorials
Hits: 76866
27Mar2023

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

Information
First published April 10, 2012
76866 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:

What the plugin IS:

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:

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:

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.