prototype.js / jQuery.js conflict and resolution

Posted in javascript, jQuery, prototype JS by

when you use jQuery and prototype javascript frameworks togather on the same page, it creates conflicts.

jQuery has provided a resolution to this conflict. The resolution goes as below:

Overriding the $-function:

1) you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

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

2) Additionally, there's another option. If you want to make sure that
jQuery won't conflict with another library - but you want the benefit
of a short name, you could do something like this:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

For more information on the above topic please refer to http://docs.jquery.com/Using_jQuery_with_Other_Libraries

29 thoughts on “prototype.js / jQuery.js conflict and resolution”

  2. Hi I have a problem implementing lightbox 2 (that uses prototype.js) and Feature Content Gallery (that uses jQuery) in the same page. One excludes the other. I’m not really into js so if you can help me I would be very grateful.

    Thanks in Advance

    Reply

  4. Hi sachin while searching stuff i came across your blog, c i am using jquery and i want to use the auto_complete_tag of symfony which gives a call to the prototype.js of symfony implicitly. both of these are getting clashed. and its saying $ is not defined. i have already used no conflict on the page where jquery is getting loaded.. Please suggest something..

    Thanks in Advance

    Reply

  9. Hi. The solution we find here and in the jQuery website includes a statement that “hides” divs. This simply “hides” the content on my page. Is there a solution without having to hide divs?? Thanks

    Reply

  10. Pingback: Jquery Conflict with Prototype in Magento - Paul Donnelly - Website Designer and Developer from Northern Ireland

  11. var xmlHttp

    function loadContent()
    {

    $(“#Menu”).load(“menu.html”);

    $(“#Clients”).load(“clientslist.html”);
    }

    Reply

  12. I am using this jquery function in website..but this code have conflicting to other .
    How to solve conflicting problem in this function ????????????????

    ————————

    var xmlHttp

    function loadContent()
    {

    $(“#Menu”).load(“menu.html”);

    $(“#Clients”).load(“clientslist.html”);
    }

    Reply

  13. @samsami2u : I was struck with this issue for almost 3 days and you helped me save bread for the rest of ma life!!!

    Three cheers to you friend.

    Reply

  14. Pingback: jquery.min.js & prototype.js – conflict and resolution « basri.my

  15. Have two weeks on and off working on this issue. I attempted to above correction and have had no luck. I am using jquery-1.2.6.js. Is this a problem of itself? Looking for ANY help I can get so I my normal life will return.

    Reply

  16. any idea about oscommers . I search a lot about the file format in oscommers and what are functionality for that. Please help me !!

    Reply

  20. Hello Samsami2u,
    I am getting error when prototype.js & one other js both are in a same page.
    What should be the solution?

    Actually I am having a slider in a page that is using a js file named “all.js” & in that page drop-down menu is there.
    pls. see http://eagle.arvixe.com/~houselav/index.php/gallery/chanel-gallery.html (In this page “Shop” menu is having a drop-down menu).

    Now when including “all.js” file if I write jQuery.noConflict(); after including “all.js” then slider stops working & if I do not write no-conflict() after including “all.js” then drop-down menu stop coming.

    Any solution?

    Thanks.

    Reply

  21. I’m getting a conflicting error only with IE8 with jquery. It works in IE7 and IE9 but for some reason in 8 jquery and prototype.js conflict. can someone help me if I post my code?

    Reply

Leave a reply to samsami2u Cancel reply