Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using JQuery and Prototype in the same page

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.

like image 613
Dónal Avatar asked Jan 16 '09 17:01

Dónal


2 Answers

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

like image 171
jmonteiro Avatar answered Oct 04 '22 00:10

jmonteiro


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.

like image 36
Sampson Avatar answered Oct 04 '22 02:10

Sampson