jQuery’s noConflict Mode

It’s easy to take jQuery’s claim on “$” for granted. Pretty much every plugin or tutorial one can find online assumes “$” maps to the jQuery object. And, most of the time, one can code with this assumption and everything will work out fine.

Every once in a while though, you write your Javascript, paste it into your site, and test:

Nothing.

Actually, not nothing, just nothing from your code. In the console, you see this error (or some variation on it):

$ is not a function

The thing is, other libraries like MooTools, prototype.js, and YUI like to use “$” too. If they’ve already claimed the “$” namespace there’s going to be a conflict.

Another possible reason for this error is that jQuery isn’t mapped to “$”. Ning, for example, forces admins to use “x$” in order to keep admin-provided Javascript separate from Ning’s own core functionality.

The simplest solution to both of these issues is jQuery’s own noConflict mode. It allows you to create an alias for the jQuery object using your own namespace, be that “$” or anything else.

First, confirm that you’re including the jQuery library. You can either download it right from the source or, as I use in the example below, reference the most recent version via a reliable CDN like Media Temple.

[If you’re using CMS like WordPress chances are jQuery is included automatically but if you’re having a problem it’s worth searching the source code for “jquery” before doing anything else.]

Here’s the Javascript we want to run:

<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$(window).ready(function() {
    $('#hideMe').hide();
    $('#showMe').show();
});
</script>

If you’re including the jQuery library properly you already have access to the object in the “jQuery” namespace. So, we could solve the issue by rewriting our code like so:

<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
jQuery(window).ready(function() {
    jQuery('#hideMe').hide();
    jQuery('#showMe').show();
});
</script>

Blech–too much typing. Instead, we can employ jQuery’s handy noConflict mode to define the namespace:

<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$ = jQuery.noConflict();
$(window).ready(function() {
    $('#hideMe').hide();
    $('#showMe').show();
});
</script>

And, simple as that, the jQuery object is now accessible anywhere on the page as “$”.

Now if “$” has already been claimed by another library, we can use any variation of it that we want, such as “$j”:

<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$j = jQuery.noConflict();
$j(window).ready(function() {
    $j('#hideMe').hide();
    $j('#showMe').show();
});
</script>

We can also wrap all of our code in a function that maps jQuery to “$” locally:

<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
(function($){
    $(window).ready(function() {
        $('#hideMe').hide();
        $('#showMe').show();
    });
})(jQuery);
</script>

The scope of “$” in this example is limited to the function itself so one can employ complex code (such as a plugin that uses the “$” namespace) on a page where “$” has been claimed by another library without having to alter the code.

If your code has a load-event listener you can use those to perform the mapping as well:

<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
/* Fire when the DOM is ready */
jQuery(document).ready(function($){
    $('#hideMe').hide();
    $('#showMe').show();
});

/* Fire when window has finished loading */
jQuery(window).load(function($){
    $('#hideMe').hide();
    $('#showMe').show();
});
</script>