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

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 .

Advertisements
Categories: JavaScript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: