15 November 2011

Drupal use two different jquery version with noconflict

While developing a website using drupal, we had a requirement, this requirement can be achieved using simple function available on recent release of jQuery, but in drupal 6 core has jQuery 1.2.6 and also if we update the jQuery with drupal module jQuery_update, we shall have only 1.3.2. So next, we can add recent release of jQuery1.7 through theme. Our new requirement will work now fine, hey we appreciate ourselves. But after a few minutes, we will come to know that many other jQuery function stopped working. After debugging, we will know that both version of jQuery is loaded in the same page, so version conflict.

What is the solution?

After digging the net and with reference to the jQuery documentation, I came to know that jQuery has a feature Using jQuery with Other Libraries i.e jQuery can be used with other libraries like mootools,  prototype etc. in a single webpage. To enable this feature jQuery has a function called noConflict.

How to use this function.
<html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

Above example demonstrates how jquery can be used with other library. $ is used in both libraries so because of conflict javascript will stop execution.  jQuery.noConflict() line will release the $ variable from jQuery, so we have to write using jquery instead of $ in the jQuery program, this makes the prototype to use $ and execute the code. this way the both libraries run smoothly.

In the same way, we can use the two different version of jQuery in a single page (Drupal). By default drupal core will add jQuery 1.2.6 So in your code you add the latest jQuery and call the noConflict function like the below sample code. Below sample code use a shortcut $j, so from here instead of $ you may use the
$j to access the functions from jQuery 1.7.
<script src="jquery-latest.js"></script>
   <script>
     var $j = jQuery.noConflict();
     
     // Use jQuery via $j(...)
     $j(document).ready(function(){
       // isNumeric function introduced in latest version 1.7
       alert($j.isNumeric(12));
     });
     
     // Use $ for 1.2.6 version $(...), etc.
     $('#someid').hide();
   </script>


If you are using a plugin which is depends on 1.7 then use as below

<script src="jquery-latest.js"></script>
   <script>
     jQuery.noConflict();
     
     // Use jQuery via $j(...)
     jQuery(document).ready(function($){
       // we may use usual code here
       alert($.isNumeric(12));
     });
     
     // Use $ for 1.2.6 version $(...), etc.
     $('#someid').hide();
   </script>



7 comments:

  1. Hi,
    Thanks for the wonderful post on Jquery Conflict!
    It causes some headache long time back for me

    ReplyDelete
  2. Thanks for that - of course, now looking at this with a fresh eye there is the nasty redundancy that if you just want a single entry from a list of terms you'll get a whole bunch of unnecessary DB accesses. drupal

    ReplyDelete
  3. https://www.youtube.com/watch?v=j3ZlN0r9dxI

    ReplyDelete
  4. Great that you described it is very important to be interested in it.

    ReplyDelete
  5. Thanks for sharing this information. I really like your blog post very much. You have really shared an informative and interesting blog post with people.

    ReplyDelete