29Oct2015
Information
Print

Solve jQuery issues with jQuery Easy: a case study

Information
jQuery jQuery Easy jQuery Easy Profiles
First published September 04, 2012
10789 hits -
 

Since the plugin has been available online, many issues were presented to me and frankly, some websites can become a real mess when so many extensions use there own jQuery code. Forget about jQuery and MooTools conflicts! jQuery conflicts alone are mostly taking websites down to their knees. 
Here is a case study I wanted to share, as I was researching the best way to correct such a mess, with the help of the jQuery Easy plugin. In this study, we will handle jQuery/MooTools conflicts and allow 2 jQuery extensions to use their own variables.

Step 1: Issues' inventory

Here is the web site source code. jQuery extensions do not work...

<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script type="text/javascript" src="/libraries/jquery/v1.8/jquery.min.js"></script>
<script type="text/javascript">
     var jQuery_1 = $.noConflict(true);
</script>
<script type="text/javascript" src="/libraries/jquery/v1.3/jquery.min.js"></script>
<script type="text/javascript">
     var jQuery_2 = $.noConflict(true);
</script>
<script type="text/javascript">
     (function($) {
         // some code here
     })(jQuery_1);
 
     $(document).ready(function() {
         $('span').css('text-transform', 'uppercase');
         $('span').hover(function() {
             $('span').css('color', 'red');
         });
     });
 
     jQuery_2(document).ready(function($) {
         $('span').css('color', 'yellow');
     });
 
     var randomVar = $.noConflict();
</script>

Several major issues arise from this code: 

  • obvious conflicts with MooTools. Here the intend is to use '$' for jQuery. But MooTools stands in the way.
  • 2 different libraries of jQuery are loaded. Which one is going to be actually used (probably the second one, but that depends on how the browser handles the javascript loading)? What if the following jQuery code works with one version but not the other?
  • there are 3 versions of noConflict(). They all are loaded form a variable. Does it actually helps avoid conflicts? It does not.

Step 2: jQuery Easy intervention (plugin version 1.3+)

  • load only one jQuery library.

It turns out the code supposedly using the 1.3 library can work under the 1.8 one (to make this use case easier to follow). Therefore, we select the 1.8 version in the plugin.

selecting the jQuery library version

By doing so, it also ensures the library is loaded after the MooTools ones.

  • Add the jQuery.noConflict(); code

The plugin will do this by default. It will add a script file right after the loading of the jQuery library. All lines containing noConflict() will be removed (3 lines in this example)

adding the no conflict declaration

Now, by doing that, $ is refering to MooTools and jQuery to jQuery. From now on, all jQuery code has to go thru jQuery in order to be recognized as jQuery code.

  • replace $ with jQuery for the jQuery code

One new option can help in doing that: 'fix document ready'.

the fix document ready option

It will replace all $(document).ready(function() { with jQuery(document).ready(function($) { and therefore allow all included code to still use the $.

But wait, are we there yet? No, not quite...

  • put the jQuery variables back

We previously removed all instances of noConflict() and therefore deleted the variables jQuery_1 and jQuery_2. Now is the time to put them back the proper way. In order to do that we need to use the option 'add script declarations'. We left out the 3rd variable, which was not used anyway.

adding script declarations from inside the plugin

This adds the script lines before any other script declaration in the source code. We do not need to add 'true' inside the parenthesis because this is used only in the case several jQuery libraries are loaded on the same page.

Step 3: source code recap

What does the source code look like after all those changes? Here we go:

<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/libraries/jquery/v1.8/jquery.min.js" type="text/javascript"></script>
<script src="/plugins/system/jqueryeasy/jquerynoconflict.js" type="text/javascript"></script>
<script type="text/javascript">
     var jQuery_1 = jQuery.noConflict();
     var jQuery_2 = jQuery.noConflict();
</script>
<script type="text/javascript">
     (function($) {
         // some code here
     })(jQuery_1);
 
     jQuery(document).ready(function($) {
         $('span').css('text-transform', 'uppercase');
         $('span').hover(function() {
             $('span').css('color', 'red');
         });
     });
 
     jQuery_2(document).ready(function($) {
         $('span').css('color', 'yellow');
     });
</script>

Now, jQuery, jQuery_1 and jQuery_2 are viable jQuery variables that can work alongside MooTools.