jQuery – Avoid Conflict with other Javascript Libraries

Recently start learning jQuery =)

When you are using jQuery with other Javascript libraries such as Prototype. There will be conflict on the $() function. There are 3 ways to bypass the conflict.

1. Only use jQuery() for the jQuery calls and revert the $() to Prototype

jQuery.noConflict();
   
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
	jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();

 

2. Define your own jQuery call

var $j = jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){
	$j("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();

 

3. Define the scope for the jQuery codes

jQuery.noConflict();

// Put all your code in your document ready area
jQuery(document).ready(function($){
	// Do jQuery stuff using $
	$("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();

Done =)

Reference: Using jQuery with Other Libraries

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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.