jQuery.noConflict() – Multiple Javascript Libraries

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);

27 Comments



  1. After visiting many jQuery no conflict articles, yours was simple and straightforward. Worked. Thanks!

    Reply

  2. 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.

    Reply

  3. This solution is concise, elegant, and easy to implement. Thank you!!!

    Reply

  4. Thanks a bunch….this solves all my problems… u’re a life saver…

    Reply

  5. the simplest solution ever, thx a LOT!!! 🙂

    Reply


  6. Simply, elegant, working solution. Thanks man!

    Reply

  7. You definitely saved my ass today. Thanks!

    Reply

  8. F’kn awesome stuff…was pulling my hair our big time on this one…thanks a lot!!! 🙂

    Reply

  9. Dude, your a genious!!!!! This has been driving me crazy. Thank you so much!

    Reply

  10. Seems like you are missing a “)” in your code… See below for fixed version

    (function($){
    $(document).ready(function() {
    // Do awesome stuff…
    })
    })(jQuery);

    Reply

  11. 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!!!

    Reply

  12. May someone explain how can i use this function. Where do i put the libraries ?

    Reply

  13. It worked. So simple it was complicated.
    If you were in Albuquerque, NM I would buy you a beer.

    Thanks a lot. I appreciate it.

    D

    Reply

  14. This was driving me crazy. Genius you are!
    You definitely saved my ass.

    Thanks so much 🙂

    Reply

  15. Dude, you have saved me hours of figuring this one out. Awesome job.. Thanks.. xxx

    Reply

  16. Oh man! This is BRILLIANT!.

    Reply

  17. similar story to others above, i think you are awesome, thanks so much!!

    Reply

  18. Man, this may seem an old thread but it saved me! Thanks a lot bro, you’re definitely a genius!

    Reply

  19. Finally, after 3 days of research, not only the simplest but also the only satisfying solution!
    Thanks Dude!

    Reply

  20. Thank you, Your solution was simple.Thanks Man. 🙂

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *