prototype.js / jQuery.js conflict and resolution

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
About these ads

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

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

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

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

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

  5. var xmlHttp

    function loadContent()
    {

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

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

  6. 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”);
    }

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

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

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

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

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

  12. 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?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s