Avoiding JQuery Conflicts with Other JavaScript Libraries

What is JQuery?

JQuery is JavaScript library designed to simplify client site scripting of HTML. JQuery is free open source software. The jQuery library is a single JavaScript file that contain all of its DOM event, effects, and some Ajax functions.

What is JQuery Conflicts?

The JQuery and all its Plugins, all by default use “jQuery” as its namespace. In general All global objects are stored in JQuery namespace, So that you cannot clash with JQuery and other JavaScript library like prototype, YUI and Moo Tools etc.

In JQuery, by default JQuery use “$” as shortcut of “jQuery”, Thus if you are using another JavaScript library with JQuery which use “$” as namespace, You will run into conflicts with JQuery. It means, when you will run any JQuery function after loading jQuery on page, like this

1
2
3
4
5

<script type="text/javascript" src="prototype.js"></script><script type="text/javascript" src="jquery.js"></script><script type="”text/javascript”">// <![CDATA[
	$(document).ready(function(){
		$(“#myDiv”).slideDown();
	});
// ]]></script>

You will get this type of error

How to avoid JQuery conflict?

To avoid jQuery conflict you have to put jQuery in no-conflict mode like below.

1
2
3
4
5
6
7

<script type="text/javascript" src="prototype.js"></script><script type="text/javascript" src="jquery.js"></script><script type="”text/javascript”">// <![CDATA[
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function 
$j(document).ready(function() {
    $j( "#mydiv" ).slideDown();
});
// ]]></script>

In the above code “$” will be revert back to its meaning in original library, You will still be able to use the full functions of jQuery by using “$j” as well as “JQuery”

When you use JQuery in no-conflict mode, you have to put jQuery after loading other libraries.

If you want to load JQuery before other library than you have to use “JQuery” instead of “$”. In that case you don’t need to use jquery in no-Conflict mode. Like below

1
2
3
4
5

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="prototype.js"></script><script type="”text/javascript”">// <![CDATA[
jQuery(document).ready(function( $ ) {
    // Your jQuery code here, using $ to refer to jQuery.
});
// ]]></script>