How do I implement JQuery.noConflict() ?
jQuery.noConflict
will reset the $
variable so it's no longer an alias of jQuery
. Aside from just calling it once, there's not much else you really need to do. Though, you can create your own alias with the return value, if you'd like:
var jq = jQuery.noConflict();
And, generally, you want to do this right after including jQuery and any plugins:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>
You can also go one step further and free up jQuery
with noConflict(true)
. Though, if you take this route, you'll definitely want an alias as neither $
nor jQuery
will probably be what you want:
var jq = jQuery.noConflict(true);
I think this last option is mostly used for mixing versions of jQuery, particularly for out-dated plugins when you want to update jQuery itself:
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>
By default, jquery uses the variable jQuery
and the $ is used for your convenience. If you want to avoid conflicts, a good way is to encapsulate jQuery like so:
(function($){
$(function(){
alert('$ is safe!');
});
})(jQuery)