Looking to Build/Redesign a Website or Blog ?

To speak to Rakshit, call +91 968 704 2303

Use of jQuery with other Javascript Libraries like Prototype, MooTools, or YUI..

Today i faced i problem where i want to use jquery with other javascript library (Prototype). By default jquery is using "$" as a short key for jQuery. When you use jQuery with other javascript library,jQuery object and prototype object were using same variable($). As a result they conflict with eachother and one of the functionality of javascript library will be missed. If you want to use jquery with other javascript library(Prototype, MooTools, or YUI) at the same time than you have to use different object instead of "$".

There are couple of ways by which you can seperate this two object and you can use functionality of both javascript library at the same time. Here i an showing how to differentiate jquery object and prototype object.

Solution 1. Use jQuery instead of "$" by defining jQuery.noConflict()

 
<html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();  // This statement avoid clash between javascript library
    
     // Use jQuery via jQuery(…)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
    
     // Use Prototype with $(…), etc.
     $('id').hide();
   </script>
 </head>
 <body></body>
 </html>
 

For more solutions look at below.

Solution 2. Define different variable name for jQuery (other than "$")

<html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var a = jQuery.noConflict();
    
     // Use jQuery via a(…)
     a(document).ready(function(){
       a("div").hide();
     });
    
     // Use Prototype with $(…), etc.
     $('id').hide();
   </script>
 </head>
 <body></body>
 </html>
 

 Solution 3. Define $ inside document.ready function

 
 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
    
     // Put all your code in your document ready area
     jQuery(document).ready(function($){ // define $ here
       // Do jQuery stuff using $
       $("div").hide();
     });
    
     // Use Prototype with $(…), etc.
     $('id').hide();
   </script>
 </head>
 <body></body>
 </html>
 

 Solution 4. Include jQuery before other library and use jQuery

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

Reference from : http://docs.jquery.com/Using_jQuery_with_Other_Libraries

To know more about programming,JavaScript issues,jQuery,Expression Engine,MYSQL database,php info,php editor,programming php,Open-source,php help and php script , subscribe to our feed by entering email address below. You will get updates via email about every tutorial posted on this site . It will not take more than a sec.

Enter your email address:
 
Feel free to ask any question. Just leave your comment below and we will answer your comment with in 24 hours.
Share:

4 Comments

Leave a Reply

Your email address will not be published.