What is JQuery.noConflict?

Definition: As per official jQuery we can define JQuery.noConflict as “A Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself).”

In most of the web development softwares, we used client side scriptting [ref: http://en.wikipedia.org/wiki/Client-side_scripting].

Magic is most of these scriptting adapted JavaScript. This is not false if I say JavaScript is a mother language of most client-scripting :).

Lets come back to our original question, many of JavaScript Libraries mostly uses $ as a function or variable name [ref.:http://api.jquery.com/jQuery.noConflict/].

In similar way in JQuery, we use $ as a alias of jQuery, which is nothing but provide us all functionality without using $.

Now, think about a situation where you need to use different types of client-scripting, see below snippet:

<script src="myjavascriptlibrary.js"></script>
<script src="mycustomlibrary.js"></script>
<script src="myjquery.js"></script>

<script>
//Here I am using my customlibrary alongwith other Javascrip libraries
</script>

<script>
//Here I am using my customlibrary alongwith other Javascrip libraries
</script>

In above scenario, render-engine have no idea to detect the owner of $, so, above will not run successfully.
So, what to do to make it correct, think for following in a moment:

<script src="myjavascriptlibrary.js"></script>
<script src="mycustomlibrary.js"></script>
<script src="myjquery.js"></script>

<script>

$.noConflict();
//Write code for all custom libraries including jquery itself

</script>

Its too easy to use, isn’t it !

Here are some more way to use noConflict() alongwith jquery itself:

//You can separate jquery path
<script src="myjavascriptlibrary.js"></script>
<script src="mycustomlibrary.js"></script>
<script src="myjquery.js"></script>

<script>

$.noConflict();

jQuery( document ).ready(function( $ ) {

//Write code for jquery

});
//Write code for all custom libraries

</script>

//You can get a jquery alias to teart a separate copy
<script src="myjavascriptlibrary.js"></script>
<script src="mycustomlibrary.js"></script>
<script src="myjquery.js"></script>

<script>
//jquery in my own copy
var $myjq = jQuery.noConflict();

</script>

Reference(s):
The above is a prescribed way to understand the answer, if you willing to get into depth, refer official jquery docs: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

1 comment on “What is JQuery.noConflict?”

Leave A Reply