Home » JavaScript » jQuery » jQuery noConflict Example

About Fabio Cimo

Fabio Cimo
Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

jQuery noConflict Example

The aim of this example is to present you with an important method of jQuery, the noConflict() method. As you already know, jQuery uses the $ sign as a shortcut for jQuery.

There are many other popular JavaScript frameworks like: Angular, Backbone, Ember, Knockout, and more. What if other JavaScript frameworks also use the $ sign as a shortcut?

If two different frameworks are using the same shortcut, one of them might stop working. The jQuery team have already thought about this, and implemented the noConflict() method.

That means you can add as many libraries as you want into your web projects as long as they do not interefere with each-other.

1. Basic Document Setup

To begin, create a new HTML document and add the following basic syntax inside:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery noConflict Example</title>
</head>
<body>

<!-- HTML SECTION  -->


<!-- JAVASCRIPT SECTION  -->
<script src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

</script>

</body>

Note that jQuery library is linked locally, so you need to download and link it too, by clicking here.

2. Appying noConflict()

The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. You can of course still use jQuery, simply by writing the full name instead of the shortcut:

<!-- HTML SECTION  -->
<p>Just a paragraph here!</p>
<button>jQuery Test</button>

In the JS section, we apply the noConflict method to the $ sign that is by default equal to jQuery. Then, we use jQuery to select DOM elements, just like we did with $.

<!-- JAVASCRIPT SECTION  -->
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery is still working!");
    });
});
</script>

We’d normally get the same functionality:

conflict-1

3. A Closer Look on Ways to Reference the jQuery Function

This is a set of ways you can reference the jQuery function when the presence of another library creates a conflict over the use of the $ variable:

3.1 Create a new Alias

The jQuery.noConflict() method returns a reference to the jQuery function, so you can capture it in whatever variable:

<!-- JAVASCRIPT SECTION  -->
<script type="text/javascript">
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

// Give $ back to prototype.js; create new alias to jQuery.
var $j = jQuery.noConflict();

</script>

Clearly, this created a new alias to the jQuery function, $j and the $ sign has now the prototype.js meaning. Now see how we can reference these two libraries now:

<script src="prototype.js"></script>
<script src="jquery-1.11.3.min.js"></script>

<!-- JAVASCRIPT SECTION  -->
<!-- Putting jQuery into no-conflict mode. -->
<script>

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    $j( "div" ).hide();
});

// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
    var mainDiv = $( "main" );
}
</script>

3.2 Use an Immediately Invoked Function Expression

You can continue to use the standard $ by wrapping your code in an immediately invoked function expression; this is also a standard pattern for jQuery plugin authoring, where the author cannot know whether another library has taken over the $.

<!-- JAVASCRIPT SECTION  -->
<!-- Using the $ inside an immediately-invoked function expression. -->
<script src="prototype.js"></script>
<script src="jquery-1.11.3.min.js"></script>

<script>
jQuery.noConflict();
(function( $ ) {
    // Your jQuery code here, using the $
})( jQuery );
</script>

3.3 Use the Argument Passed to the jQuery(document).ready() Function

Alternatively, you can also use a specific sign like the $ inside the ready function of jQuery, and obviously, you can refer to jQuery code using whatever argument you set in the function. That only means you can use it inside the function, because outside of that, the scope is different and so is (might be) the $ selector interpreted.

<!-- JAVASCRIPT SECTION  -->
<script src="prototype.js"></script>
<script src="jquery-1.11.3.min.js"></script>

<script>
jQuery(document).ready(function( $ ) {
    // Your jQuery code here, using $ to refer to jQuery.
});
</script>

4. Conclusion

To conclude, you can follow one of the three ways to reference libraries without conflicts. You can, in addition, completely move jQuery to a new namespace in another object like this: var dom = {}; dom.query = jQuery.noConflict( true ); and then use dom.query to reference jQuery in this case.

If you want to see some examples of using these custom ways to reference liraries using .noConflict(), have a look here.

5. Download

Download
You can download the full source code of this example here: jQuery noConflict
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments