Using JQuery and Prototype in the same page

Question

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.

Ok.. :) I missed that.. :) But I think the principle is correct as I tried it out... — PrimosK
– PrimosK, Commented Jan 16, 2012 at 10:51
Obviously this is old, but I had a situation where I had to change 5 lines of code in 63 html files (I didn't build the website). Some regex replace, and replace in files did the trick in a few seconds. Notepad++ will do it to a limited degree, and submlime text editor did it like a champ. — David Hobs
– David Hobs, Commented Apr 29, 2012 at 3:04
@DavidHobs: +1 for Sublime! It's the best thing since sliced bread! — ClarkeyBoy
– ClarkeyBoy, Commented Jun 7, 2013 at 6:52

jmonteiro · Accepted Answer · 2011-10-30 14:01:28Z

19

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 $().

answered Oct 30, 2011 at 14:01

jmonteiro

1,71215 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

michaelmcgurk Over a year ago

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

Sampson · Accepted Answer · 2009-01-16 18:01:13Z

5

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.

answered Jan 16, 2009 at 18:01

Sampson

269k76 gold badges546 silver badges570 bronze badges

Comments

the Tin Man · Accepted Answer · 2012-12-21 19:31:55Z

5

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
    });
});

edited Dec 21, 2012 at 19:31

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Sep 4, 2010 at 8:30

AJCE

711 silver badge2 bronze badges

Comments

the Tin Man · Accepted Answer · 2012-12-21 19:35:08Z

3

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.

edited Dec 21, 2012 at 19:35

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Jan 16, 2009 at 19:25

Nick Van Brunt

15.6k13 gold badges72 silver badges92 bronze badges

1 Comment

acme Over a year ago

+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.

Nux · Accepted Answer · 2011-09-05 10:52:36Z

2

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

answered Sep 5, 2011 at 10:52

Nux

10.2k6 gold badges63 silver badges80 bronze badges

Comments

the Tin Man · Accepted Answer · 2012-12-21 19:33:06Z

2

Could you not just include the jQuery = noConflict() code in the jquery.js source file? Why would it need to be defined that way?

edited Dec 21, 2012 at 19:33

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Oct 27, 2009 at 16:53

Chris

291 bronze badge

Comments

PrimosK · Accepted Answer · 2012-01-10 13:34:58Z

1

Your jquery-noconflict.js should look like this (be sure that all is in one line):

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

... and than your include (as you already pointed out) should look like this:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>    
    <script type="text/javascript" src="/obp/js/jquery-noconflict.js"></script>
</head>

This solution solves all your requirements I think.

answered Jan 10, 2012 at 13:34

community wiki

PrimosK

Comments

acme · Accepted Answer · 2012-07-02 12:34:06Z

1

<script>
    document.write(unescape('%3Cscript type="text/javascript" src="/obp/js/jquery.js"%3E%3C/script%3E'));
</script>
<script>
    jQuery.noConflict();
    var $j = jQuery;
</script>

or

var scripty = document.createElement('script');
scripty.href="/obp/js/jquery.js";
document.getElementsByTagName('head')[0].appendChild(scripty);
jQuery.noConflict();
var $j = jQuery;

EDIT:

I tried out this suggestion but the last 2 lines produce the error

jQuery is not defined

edited Jul 2, 2012 at 12:34

acme

14.9k8 gold badges77 silver badges114 bronze badges

answered Jan 16, 2009 at 18:08

jacobangel

7,0262 gold badges37 silver badges35 bronze badges

2 Comments

CodeJoust Over a year ago

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; }

acme Over a year ago

@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.

the Tin Man · Accepted Answer · 2012-12-21 19:33:30Z

1

You could call jquery first and then set

var $j = jQuery;

prototype will take control of $ in this case.

Or, you could just refer to jQuery by using the full jQuery function name (jQuery).

edited Dec 21, 2012 at 19:33

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered May 20, 2009 at 22:43

RobKohr

6,9547 gold badges58 silver badges84 bronze badges

Comments

the Tin Man · Accepted Answer · 2012-12-21 19:31:04Z

0

Use Prototype below jQuery like this:

<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>


<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />

in this case the jQuery function will create a problem, so you can use this to solve the problem:

<script type="text/javascript">
     jQuery.noConflict();
     var JQ = jQuery;//rename $ function
</script>

edited Dec 21, 2012 at 19:31

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered May 25, 2010 at 8:06

Curzon Rahman

1

Comments

the Tin Man · Accepted Answer · 2012-12-21 19:34:42Z

0

If I were you, I'd drop my no conflict code into a JavaScript include file like you opined about above, and then figure out some process where I'd be setting these things I need to include in all my pages in one central place. If you are working with straight HTML files and you don't have any kind of templating/scripting capability server-side for what gets included in a document, there's always the possibility of doing a Server-Side Include.

Either way, the pain you'll experience updating each of your pages this time will come back again when you need to update your analytics code or the site footer.

edited Dec 21, 2012 at 19:34

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Jan 16, 2009 at 19:44

Billy Gray

1,7474 gold badges19 silver badges26 bronze badges

Comments

robstarbuck · Accepted Answer · 2016-07-09 00:36:14Z

0

You need to load it in your public/javascript/application.js

jQuery.noConflict();

var $j = jQuery;

This is also a good article that may be helpful.

JQuery & Prototype working together

edited Jul 9, 2016 at 0:36

robstarbuck

8,2773 gold badges48 silver badges44 bronze badges

answered Feb 17, 2011 at 10:17

kkampen

4479 silver badges22 bronze badges

Collectives™ on Stack Overflow

Using JQuery and Prototype in the same page

12 Answers 12

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related