One of the reasons that make a software popular is its extensions and plugins. jQuery has plenty of plugins that do almost anything you want, from simple button hide to full blown galleries. Plugins let non developers easily add functionality they need to their websites and there are times when one might include more than one javascript library such as prototype.js, YUI or mootools with jQuery. They all use $ as their main function name. Including second library might brake the behavior of the first one. To resolve such cases jQuery introduces .noConflict() method.
When you call .noConflict() jQuery will return $() to it’s previous owner and you will need to use jQuery() instead of shorthand $() function.
.noConflict() usage example (From jQuery Docs site)
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
You can also use the following code snippets to still use $() in your code, but with one drawback, you will not have access to your other library’s $() method.
// Method 1
jQuery(document).ready(function($){
$("div").hide();
});
// Method 2
(function($) {
/* some code that uses $ */
})(jQuery);
TIP:
Don’t forget that you can always assign jQuery to any other variable name to use it as your shorthand: var $_ = jQuery;
This comment has been removed by a blog administrator.
ReplyDeleteHi, I was wondering if you could help me with a conflict on my site.
ReplyDeleteI have a menu that uses jQuery, and a script (LightView) running prototyp.
Ive researched the conflict, and tried to understand how to fix it, but I'm pretty much lost.
I dont know where to properly use .noConflict()
Could you take a look at mysite and maybe suggest a solution?
My email is squirrelslax[at]gmail.com
thank you
This doesn't tell you how to use other libraries.
ReplyDeleteThank you! it works!)
ReplyDeleteOld post I know. Just wanted say thanks. All I had to do was open up my jquery file and auto-replace every $( with jquery( and it worked fine with prototype.js on the same page.
ReplyDelete@Herbert Weaver
ReplyDeletethank you very much. I just CTRL + F and replace every $ like you did. thanks again :)
I am trying to fix problem on my website, but because of using so many jquery libraries, it takes me a lot of time. Thanks for sharing, I was looking for it for almost half an hours:)!
ReplyDeleteThanks so much, you have clearly explained something that has been giving me a headache for the last two hours!
ReplyDeleteWorks a treat.
Thank you so much for explaining it with good example, i have searched a lot but i did'nt find any thing workable.
ReplyDeleteNice.... :-)
I wonder why method two doesn't work. I even tried using $_ as the parameter and replaced all $ with $_ in my script. Any explanation?
ReplyDeleteYes very old thread, but I've probably spent 10 hours trying to figure this out, and this is the first site that has explained it in a way that I actually understand. Just resolved the conflict and my site is working like a charm. Thanks!
ReplyDeleteOld post I know. Just wanted say thanks. All I had to do was open up my jquery file and auto-replace every $( with jquery( and it worked fine with prototype.js on the same page.
ReplyDeleteis this page still alive..cuz i need help:)
ReplyDeleteThank you, thank you, thank you!
ReplyDeleteI got this small js for a meny and it came in conflict with the slideshow. Now it is working perfect! I did as Herbert and replace every $ with jQuery. I'm very new to this and it would helped a lot if you posted a example of "before" and "after" the replacing. Maby it is just me, but sometimes when you find solusion on the internet, it is hard to know where "to put" this perfect tip...
Thanks again!
Thanks for the code, I will add it so I don't worried about jquery conflict.
ReplyDelete