Problem Using Both Prototype And Jquery In The Same Page

I have a conflict when I use a jquery script for inline window and prototype to toogle a menu. When I use one of the two is working properly. However when I use them both, only the

Solution 1:

Put this right after the embedded jquery.js:

<scripttype="text/javascript">
$.noConflict();
</script>

And change this line:

$(document).ready(function(){

to

jQuery(document).ready(function($){

Solution 2:

First load jQuery and then call

jQuery.noConflict(); 
//if loaded first, you could also use $.noConflict(), //but consistency is a good thing

Then continue loading the rest of your stuff (including Prototype, custom scripts, etc).

Finally (and this pertains to your first example above) use the function jQuery where you would normally use $.

---

Your basic problem is that $ is used by both Prototype and jQuery as a reference to another function. Unfortunately, Prototype more or less requires its $ definition, which means that once its loaded, nothing else should name itself $. jQuery's noConflict method gets rid of the $ method to prevent this problem.

Solution 3:

1.- Load jQuery library. 2.- Do your jQuery stuff 3.- Load Prototype library 4.- Do your Prototype stuff

You should use the noConflict function on jQuery, your jQuery stuff should start this way:

<scripttype="text/javascript">
jQuery.noConflict();
jQuery(function($){

    //All my jQuery stuff

});
</script>

If you need more info check the jQuery API http://api.jquery.com/jQuery.noConflict/