Using JQuery and Prototype in same application

30 12 2008

Hello Friends,

While developing my project in Zend Framework, i came across a scenario where  it was needed to use both Prototype and Jquery in same application. Though it was seeming okay to use both in same application but my Firebug alarmed me with some Error messages. These error messages were about JQeury functions that were working fine before i addedd Prototype in my code.

After some Error tracking and Googling i found the solution so i am sharing with you :)

Reason of problem: Both frameworks use $()-function declaration so it causes problems when both JQuery and Prototype are used in same application.

Solution of Problem: I solved this problem by using jQuery alias function jQuery()

Example Code:
Following was my code before problem fixation:

<script type=”text/JavaScript”>
$(document).ready(function(){
$(“form#test-form”).submit(function(){
$(“#msg”).val(“Hello world”);
});
return true;
});
</script>

I modifed to fix the problem:

<script type=”text/JavaScript”>
jQuery(function($){$(document).ready(function(){
$(“form#test-form”).submit(function(){
$(“#msg”).val(“Hello world”);
});
return true;
});});
</script>

Thats It!

Though it was more then eassy but was new for me, hopefully be helpfull for you too :)


Actions

Information

4 responses

5 05 2009
bgthom

Great post.

You can also use the jQuery.noConflict function (http://docs.jquery.com/Core/jQuery.noConflict) at the end of your jQuery script to achieve the same result.

30 07 2009
Carmelo

THANK YOU!!
Such a simple soultion to such an annoying problem.

13 08 2009
Francisco

Thanks !

I had a similar problem, and the others solutions didn’t work (jQuery.noConflict etc).
Now it works as it should be. THANKS :D

28 10 2009
Peter, Liverpool UK

Many thanks!

Leave a comment