Prototype.js and jquery conflicts

This post contains information about how to use prototype.js and jquery in same page by resolving conflicts.

Problem:
In my current project prototype.js used on very huge number of places so that is not easy to remove that and also per new client’s requirement we have to use jquery but when we have import jquery below protype.js then all prototype.js related script was not working.

<script type="text/javascript" src="js/prototype.js"></script>
    
    <script src="js/jquery-1.5.1.js" type="text/javascript"></script>

And I have writen below script and that is not working

<script type="text/javascript" src="js/prototype.js"></script>
         <script>
         jQuery.noConflict();
     </script> 

Also when I have change the passion of the both file and first add jquery and then add prototype.js then jquery related part was not working.

The problem is that in query in standard format $ we are getting any variable like $(‘Myclassname”) that is not working due to these conflicts.

Solution
To resolve this issue I have added below script in my page.

    <script type="text/javascript" src="js/prototype.js"></script>
    <script src="js/jquery-1.5.1.js" type="text/javascript"></script>
     <script>
         jQuery.noConflict();

         // Use jQuery via jQuery(...)
         jQuery(document).ready(function() {
             
         });
     </script> 

In this script also I have override $ with Jquery so every very we need to use query just use Jquery rather then $ and things was working fine.

$(".panel").hide();  // Replace with below
jQuery(".panel").hide();

So by this solution we can access both the solution.
Let me know for further information.

Thanks,
Amit Patel
“Enjoy Programming”

About these ads
Follow

Get every new post delivered to your Inbox.

Join 238 other followers