Using JQuery and Prototype in same application

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 ๐Ÿ™‚

Advertisements

16 thoughts on “Using JQuery and Prototype in same application

  1. Usman says:

    Sorry bro, i have stil problem, basically i m using jquery for slider and top navigation. and prototype for lightbox.
    and i have 5-6 js files. i dont know about jquery, can u explain, how can i resolve the prblem.

    I am waiting.

    Thanks bro.

  2. ccyborg says:

    very usefull and simple stuff to use when prototype.js is linked after jquery.
    jQuery.noConflict works only if jquery is linked after prototype.js
    thanks

  3. Ton Trevisan says:

    Thank u so much Buddy !!!!!!!!
    Your solution in my code, maybe will help someone…

    jQuery(function($){
    $(function(){
    $(‘#slides’).slides({
    preload: true,
    preloadImage: ‘images/loading.gif’,
    play: 5000,
    pause: 2500,
    hoverPause: true
    });
    });
    });

    //jQuery.noConflict();
    var $j = jQuery.noConflict();

  4. adnan says:

    totally new i have few jquery files or libraries and the this prototype.js
    where do add all these code about the noconflict ??? help please

  5. Dave says:

    i have been testing all other solutions without success. this is the easiest and working one ! thanks a million for that !

  6. TecentQQ says:

    googled and searched many solutions for days, but failed. However, this solution is veryyyyyyyyyyyyyyy helpful. Thankkkkkkkkkk you so much !

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