Using JQuery and Prototype in the same page

javascript jquery prototypejs

37,901

Solution 1

Currently you can do something like this:

<head>          
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
</head>

Then, use jQuery as $j() and Prototype's $().

Solution 2

It would seem that the most simple answer would be to bite the bullet, and include your noConflict lines. Of course if your pages aren't using a shared header, that solution might not be the best.

Solution 3

This solution worked fine:

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

Now use $j in place of $ for your jQuery code, like:

$j(document).ready(function() {
    $j('#div_id').innerfade({
         // some stuff
    });
});

Solution 4

I went through this for a while. It is very annoying and in the end I decided to weed out all of my old Prototype stuff and replace it with jQuery. I do like the way Prototype handles some Ajax tasks but it wasn't worth the trade off of maintaining all of the no conflict stuff.

Solution 5

Just as a note to others that stumble upon this. The solutions are described here (mentioning prototype specifically): http://docs.jquery.com/Using_jQuery_with_Other_Libraries

View more solutions

37,901

Author by

Dónal

I earn a living by editing text files. I can be contacted at: [email protected] You can find out about all the different kinds of text files I've edited at: My StackOverflow Careers profile

Updated on July 09, 2020

Comments

Dónal almost 4 years
Several of my pages use both JQuery and Protoype. Since I upgraded to version 1.3 of JQuery this appears to be causing problems, because both libraries define a function named '$'.

JQuery provides a function noConflict() which relinquishes control of $ to other libraries that may be using it. So it seems like I need to go through all my pages that look like this:
```
<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
</head>
```
and change them to look like this:
```
<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        var $j = jQuery;
    </script>
</head>
```
I should then be able to use '$' for Prototype and '$j' (or 'jQuery') for JQuery. I'm not entirely happy about duplicating these 2 lines of code in every relevant page, and expect that at some point somebody is likely to forget to add them to a new page. I'd prefer to be able to do the following
- Create a file jquery-noconflict.js which "includes" jquery.js and the 2 lines of code shown above
- Import jquery-noconflict.js (instead of jquery.js) in all my JSP/HTML pages
However, I'm not sure if it's possible to include one JS file in another, in the manner I've described? Of course an alternate solution is simply to add the 2 lines of code above to jquery.js directly, but if I do that I'll need to remember to do it every time I upgrade JQuery.
CodeJoust over 14 years

You need to specify a callback when the script loads to run the noconflict code... just do a .appendChild(scripty) scripty.onload = setNoconflict; function setNoconflict(){ jQuery.noConflict(); $j = jQuery; }
michaelmcgurk over 12 years

This was very helpful to me on a similar issue. Thank you jmonteiro :)
acme almost 12 years

+1 It's always a good idea to reduce the used frameworks. Not only in terms of conflicts but also in terms of a light-weight application event if it requires some refactoring to eliminate prototype.
acme almost 12 years

@jacobangel your first example works, but I removed a typo (see diff) and made a correction: it's important to close the script tag after document.write(..) and open up a new one where jQuery.noConflict() is in. Otherwise jQuery is not defined because document.write is appending the jQuery-script after the current script block.