When working on a project we normally decide on a Javascript library and stick to it. Sometimes for one reason or another there just isn’t anything we can do and a second library needs to be introduced. If you’ve ever tried this, you know that if you’re not careful you will have a hot mess on your hands.
Recently I was working on a project where all the Javascript worked fine in the static templates, but had issues when integrated with the CMS. The templates were using jQuery and the CMS was automatically adding Prototype to the page output. First thing I say is, “No problem, I’ll just use jQuery’s noConflict mode.” After making the change I was still seeing errors. After digging around I saw that our site’s main Javascript file was using the $ variable… hmmm…
To make your life easier wrap your code in an anonymous function and pass the jQuery variable in. This is probably more obvious if you’re writing some code others will use like a jQuery plugin, but could help save your ass down the line.
This is what your site’s main.js probably looks like
$(document).ready(function() { // Do awesome stuff... });
Adding the anonymous function and passing the jQuery variable in will prevent problems later with the $ variable.
(function($){ $(document).ready(function() { // Do awesome stuff... }); })(jQuery);
[...] Original post: jQuery.noConflict() – Multiple Javascript Libraries | Patrick … [...]
After visiting many jQuery no conflict articles, yours was simple and straightforward. Worked. Thanks!
I ran into a conflict of 2 libraries, did a few hours of researching and this was the only solution that worked for me. I don’t quite understand it being new to jQuery, but it works! I’ll drop a line in my code comments back to your site. Much appreciated.
This solution is concise, elegant, and easy to implement. Thank you!!!
Thanks a bunch….this solves all my problems… u’re a life saver…
the simplest solution ever, thx a LOT!!!
[...] a lot Patrick for making this so [...]
Kick ass! Thanks boss
Simply, elegant, working solution. Thanks man!
You definitely saved my ass today. Thanks!
F’kn awesome stuff…was pulling my hair our big time on this one…thanks a lot!!!
Dude, your a genious!!!!! This has been driving me crazy. Thank you so much!
Seems like you are missing a “)” in your code… See below for fixed version
(function($){
$(document).ready(function() {
// Do awesome stuff…
})
})(jQuery);
Thanks! I’ve updated the code sample.
I burned through an entire day trying to figure out how to use the jquery.noconflict() function. Then, I finally found this gem!!! Thank you so much!!!
Thanks you very much. work perfect and is easy to implement
May someone explain how can i use this function. Where do i put the libraries ?
This was driving me crazy. Genius you are!
You definitely saved my ass.
Thanks so much