How to be a jQuery no.conflict expert?

javascript, jquery

Solution

The issue is that if you want to use Prototype on the page, `$` must be Prototype's `$`, not jQuery's. Since `$` is just an alias for `jQuery` anyway, jQuery provides the `noConflict` function as a means of telling jQuery to return control of `$` back to whatever had it before jQuery was loaded.

That means whenever you might use `$`, you'd use `jQuery` instead, e.g.:

$('.foo').hide(); // Hide all elements with class "foo"

becomes

jQuery('.foo').hide(); // Hide all elements with class "foo"

If you're using external scripts, and if they use `$`, you have to modify them. One way is to do a search-and-replace and just change all the (appropriate) `$`'s to `jQuery`.

Another way is to put this just after your script tag including jQuery:

<script type='text/javascript'>jQuery.noConflict();</script>

...and then add this at the top of the external script:

(function($) {

...and this at the bottom of it:

})(jQuery);

(Yes, this means you have to modify the external scripts.)

What that does is put the entire external script inside a function, within which the `$` symbol is resolved to `jQuery` rather than to Prototype's `$`, because `$` is an argument to that function and so it takes precedence. However, that technique will fail with some scripts. If they expect that their function declarations will happen at global scope (e.g., become properties of the `window` object), then putting the entire script in a function will break that. In those cases, you have to either manually export those functions by assigning them to `window` or use the global search-and-replace option above.

There are examples of this on the jQuery `noConflict` page, although they frequently combine the above with the `ready` function, which might be a bit confusing.

Note bobince's point about conflicts between frameworks not just being limited to the `$` symbol. If you can possibly stick to using just one framework, do that.

Problem

Original source