How to Use JQuery and Prototype at the Same Time ?

Hello Friends!

Today i want to share with you some important topic.

I think you don’t know that jQuery and Prototype both will not work at same page. if you are using jquery with prototype with default settings than it will create a problem and not work according to our requirement.

I already face this problem. After long research, i have found the solution and which is working fine for me.
So The solution Read it Carefully because the arrangement is very important.

First Define jQuery in your webpage.
Click on below links for more:

<script language=”javascript” src=”js/jquery.js”></script> (Define jQuery)

// After Defining jquery file you must asign a new variable to jQuery here i have used it as “hoot”
// The reason to use this is “$” is used in both the js Jquery and Prototype and its conflicting one another.
// Prototype uses$ for id based selection
// jQuery $ uses CSS based selection
// so here “$” would be replaced with “hoot”
// so the conflict with prototype $ will be removed.

<script type=”text/javascript”>
var hoot = jQuery.noConflict();
</script>

// Define prototype js
<script language=”javascript” src=”js/prototype/prototype.js”></script>

=====================================
In Normal use of jQuery syntax will be
=====================================
<script type=”text/javascript”>
$(document).ready(function()
{
// Your code;
}
</script>
Click on below links for more:

=====================================
In jQuery+Prototype together syntax will be
=====================================
<script type=”text/javascript”>
hoot(document).ready(function()
{
//Your Code
}
</script>

So use this technique, and definitely your code starts working.

If you like this post then please comment. If you have any query or confusion then also comment me.

Thanks …