Loading ...

jQuery : How to avoid jquery clash with other libraries | CodeAsp.Net

jQuery : How to avoid jquery clash with other libraries

(7067)
0
/5
Avg: 0/5: (0 votes)
Published: 6/13/2013 by Shaitender Singh

Introduction

By default, jQuery uses "$" (Dollar sign) as a shortcut for "jQuery”. JQuery global objects are stored inside the jQuery Namespace, So there shouldn’t get clash between jQuery with other libraries like YUI, Prototype or Moo tools. Most of this libraries use $-Function, which tends to conflict with jQuery.

Tips/Tricks to Aviod Jquery Conflict with other libraries-

If you have included jQuery library after other libraries. You have can override $-Function by using jQuery.noConflict () method. There are few tricks to avoid confliction. I have used prototype and jQuery script in below code snippets.


Here are following ways -

1.       By using jQuery sign instead of $ (Dollar sign) for jQuery. Like below

   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
    
jQuery.noConflict ();
     // Use jQuery instead of $ sign with jquery.js
     jQuery(function ()
     {
       jQuery(‘#ControlID’).show();
     });

     // Use $ sign with Prototype.js
     $(‘ControlID’).show();
   </script>

2.       By using Short name you can avoid jQuery confliction with other library .You can give short name or alternate names like ( e.g. query,$JQ,$j ,jQS etc. )

    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
     var $j =
jQuery.noConflict();  //short name declaration
     // Use alternate names instead of jQuery with jquery.js
     $j(function(){    
       $j(‘#ControlID’).show();
     });

     // Use $ sign with Prototype.js
     $(‘ControlID’).show();
   </script>

   </script>

3.       By using the jQuery code inside document ready function – If don’t care about using another scripts $ functions, then there still a way , Put all your code in your document ready area. In this case you can still use $ sign in jQuery code without any conflicts with other libraries. 

   <script src="prototype.js"></script>
   <script src="jquery.js"></script>

   <script>
    
jQuery.noConflict();  

     // jQuery code in document ready function
     jQuery(function($){
       // use $ sign for jQuery Code
       $(‘#ControlID’).hide();
     });

     // Use $ sign with Prototype.js
     $(' ControlID’').hide();
   </script>

This is the ideal  and most frequently used solution, Considering there is less that you have to change in order to achieve a task.

If you have included jQuery library before other libraries, There is no need for overriding the $-function by calling jQuery.noConflict(). you can use "jQuery" to do some work with jQuery, and the "$" is also the shortcut for the other library. Like Below

   <script src="jquery.js"></script>
   <script src="prototype.js"></script>
   <script>
     // Use jQuery instead of $ sign
     jQuery(function(){
       jQuery(‘#ControlID’).show();
     });

     // Use $ sign with Prototype.js
     $(‘#ControlID’').hide();
   </script>

 

WINDING UP

By using above ways you can easily avoid Clash of titans J  .

 

 

 

 

Comments (no comments yet)

Top articles

Quick Vote

What kind of email newsletter would you prefer to receive from CodeAsp.Net?