# Prototype Helpers & jQuery

**URL:** <https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435>\
**Category:** rubyonrails-talk\
**Created:** [March 26, 2010, 10:19am UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435 "2010-03-26T10:19:31Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 26, 2010, 10:19am UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/1 "2010-03-26T10:19:31Z")

</div>

Hi guys: I'm trying to get both jQuery (specifically in this example with prettyphoto but would like to use other jquery elements as well) and prototype to work together but none of the docs I see online seem to be working for me. Here is my application layout:

\<head\> &nbsp;&nbsp;\<%= javascript\_include\_tag "tooltip" %\> &nbsp;&nbsp;\<%= javascript\_include\_tag 'jquery' %\> &nbsp;&nbsp;\<%= javascript\_include\_tag "jquery.prettyPhoto" %\> &nbsp;&nbsp;\<%= javascript\_include\_tag 'application' %\> &nbsp;&nbsp;\<%= javascript\_include\_tag 'prototype' %\> &nbsp;&nbsp;\<%= javascript\_include\_tag 'scriptaculous' %\> \</head\> \<body\> \<script type="text/javascript" charset="utf-8"\> &nbsp;&nbsp;$(document).ready(function(){ &nbsp;&nbsp;$("a[rel^='prettyPhoto']").prettyPhoto(); }); \</script\>

I looked here and I tried that:

[http://docs.jquery.com/Using\_jQuery\_with\_Other\_Libraries](http://docs.jquery.com/Using_jQuery_with_Other_Libraries)

By editing the prettyphoto block like so:

\<script type="text/javascript" charset="utf-8"\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery.noConflict(); &nbsp;&nbsp;jquery(document).ready(function(){ &nbsp;&nbsp;jquery("a[rel^='prettyPhoto']").prettyPhoto(); }); \</script\>

but once I did that, all my prototype helpers died.

Can anyone point me to a solution? Ideally, I like to keep all of my prototype helpers in place and also use jquery ui plugins like prettyphoto, date/time pickers, and the rest.

Thanks...Chris

---

<div class="post-metadata">

**Author:** ![Lasse\_Bunk](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@Lasse\_Bunk](https://discuss.rubyonrails.org/u/Lasse_Bunk)\
**Post date:** [March 26, 2010, 2:29pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/2 "2010-03-26T14:29:06Z")

</div>

Your noConflict solution is _almost_ right. There is an error in that you call jquery (with lower case ‘q’) instead of jQuery (with upper case ‘Q’). This is probably also the reason why the rest of your javascripts / Prototype helpers stop working.

Try editing it like so:

Does it work then?

/Lasse

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 26, 2010, 6:23pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/3 "2010-03-26T18:23:06Z")

</div>

Lasse Bunk wrote:

> Your noConflict solution is \*almost\* right. There is an error in that you call jquery (with lower case 'q') instead of jQuery (with upper case 'Q'). This is probably also the reason why the rest of your javascripts / Prototype helpers stop working.
> 
> Try editing it like so:
> 
> \<script type="text/javascript" charset="utf-8"\> &nbsp;&nbsp;jQuery.noConflict(); &nbsp;&nbsp;jQuery(document).ready(function() { &nbsp;&nbsp;&nbsp;&nbsp;jQuery("a[rel^='prettyPhoto']").prettyPhoto(); &nbsp;&nbsp;}); \</script\>
> 
> Does it work then?
> 
> /Lasse

Hi Lasse:

Thanks for the tip. I made that change but my prototype helpers are still hosed. Is there something in the order of the libraries?

---

<div class="post-metadata">

**Author:** ![Lasse\_Bunk](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@Lasse\_Bunk](https://discuss.rubyonrails.org/u/Lasse_Bunk)\
**Post date:** [March 26, 2010, 7:11pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/4 "2010-03-26T19:11:33Z")

</div>

Hmm, strange – do you get some sort of javascript error?

/Lasse

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 26, 2010, 7:15pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/5 "2010-03-26T19:15:45Z")

</div>

Lasse Bunk wrote:

> Hmm, strange – do you get some sort of javascript error?
> 
> /Lasse

No actually. Nothing happens at all. The jquery works (I think, can't relly test it since i can't get to the page i need to test it on without the prototype helpers) but the prototype is hosed. If I need to rewrite all of my helpers thats a huge ton of work.

Thanks...chris

---

<div class="post-metadata">

**Author:** ![Lasse\_Bunk](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@Lasse\_Bunk](https://discuss.rubyonrails.org/u/Lasse_Bunk)\
**Post date:** [March 26, 2010, 7:21pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/6 "2010-03-26T19:21:06Z")

</div>

Ok – just as a test, does it work if you delete these lines?

jQuery.noConflict(); jQuery(document).ready(

function() { jQuery(“a[rel^=‘prettyPhoto’]”).prettyPhoto();

});

/Lasse

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 26, 2010, 7:23pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/7 "2010-03-26T19:23:05Z")

</div>

Chris Kalaboukis wrote:

> Lasse Bunk wrote:
> 
> > Hmm, strange – do you get some sort of javascript error?
> > 
> > /Lasse
> 
> No actually. Nothing happens at all. The jquery works (I think, can't relly test it since i can't get to the page i need to test it on without the prototype helpers) but the prototype is hosed. If I need to rewrite all of my helpers thats a huge ton of work.
> 
> Thanks...chris

Actually...it gets even stranger, actually. When I first load it up, I can use jquery OR prototype. But as soon as I use prototype, jquery stops working. Prototype continues to work, but jquery is hosed. I guess prototype takes back control or something?

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 26, 2010, 7:43pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/8 "2010-03-26T19:43:59Z")

</div>

Lasse Bunk wrote:

> Ok – just as a test, does it work if you delete these lines?
> 
> &nbsp;&nbsp;jQuery.noConflict(); &nbsp;&nbsp;jQuery(document).ready( function() { &nbsp;&nbsp;&nbsp;&nbsp;jQuery("a[rel^='prettyPhoto']").prettyPhoto(); &nbsp;&nbsp;});
> 
> /Lasse

Yes, prototype does work, once I remove those lines...but of course jquery doesn't.

---

<div class="post-metadata">

**Author:** ![Lasse\_Bunk](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@Lasse\_Bunk](https://discuss.rubyonrails.org/u/Lasse_Bunk)\
**Post date:** [March 26, 2010, 8:11pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/9 "2010-03-26T20:11:40Z")

</div>

Ok, what I didn’t think of was that the jQuery noConflict call should of course occur _before_ loading Prototype, like this:

 \<%= javascript\_include\_tag "tooltip" %\> \<%= javascript\_include\_tag 'jquery' %\> \<%= javascript\_include\_tag “jquery.prettyPhoto” %\> \<%= javascript\_include\_tag ‘application’ %\> \<%= javascript\_include\_tag ‘prototype’ %\> \<%= javascript\_include\_tag ‘scriptaculous’ %\>

Would this do the trick?

/Lasse

---

<div class="post-metadata">

**Author:** ![Lasse\_Bunk](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@Lasse\_Bunk](https://discuss.rubyonrails.org/u/Lasse_Bunk)\
**Post date:** [March 26, 2010, 8:18pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/10 "2010-03-26T20:18:09Z")

</div>

PS. Don’t know if the loading of tooltip should be moved down below jQuery or Prototype – it depends on what it relies on.

/Lasse

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 26, 2010, 9:14pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/11 "2010-03-26T21:14:20Z")

</div>

Lasse Bunk wrote:

> Ok, what I didn't think of was that the jQuery noConflict call should of course occur \*before\* loading Prototype, like this:
> 
> \<head\> \<%= javascript\_include\_tag "tooltip" %\> \<%= javascript\_include\_tag 'jquery' %\> \<script type="text/javascript" charset="utf-8"\> &nbsp;&nbsp;&nbsp;jQuery.noConflict(); \</script\> \<%= javascript\_include\_tag "jquery.prettyPhoto" %\> \<%= javascript\_include\_tag 'application' %\> \<%= javascript\_include\_tag 'prototype' %\> \<%= javascript\_include\_tag 'scriptaculous' %\> \</head\>
> 
> \<body\> \<script type="text/javascript" charset="utf-8"\> &nbsp;&nbsp;jQuery(document).ready( &nbsp;&nbsp;&nbsp;&nbsp;function() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery("a[rel^='prettyPhoto']").prettyPhoto(); &nbsp;&nbsp;&nbsp;&nbsp;}); \</script\>
> 
> Would this do the trick?
> 
> /Lasse

Hi Lasse:

Ok I made the changes and I get the same result. I load the page, and click a link that use prettyphoto. it works. so jquery runs on load. If I keep clicking on other jquery items, they work too. But as soon as i click on a prototypre helper, the jquery stops running.

Same result.

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 26, 2010, 9:38pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/12 "2010-03-26T21:38:50Z")

</div>

Lasse Bunk wrote:

> PS. Don't know if the loading of tooltip should be moved down below jQuery or Prototype – it depends on what it relies on.
> 
> /Lasse

Same result....sorry ☹

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 26, 2010, 9:53pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/13 "2010-03-26T21:53:42Z")

</div>

Chris Kalaboukis wrote:

> Lasse Bunk wrote:
> 
> > PS. Don't know if the loading of tooltip should be moved down below jQuery or Prototype – it depends on what it relies on.
> > 
> > /Lasse
> 
> Same result....sorry ☹

I tried removing the tooltip and even moving the position of prototype above jquery. Works on load, then craps out as soon as I click on a prototype helper. Is there any way for me to reload jquery again or in some other space on the page? Can i run it in it own namespace or something??

Thanks...Chris

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 27, 2010, 7:02am UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/14 "2010-03-27T07:02:07Z")

</div>

Chris Kalaboukis wrote:

> Chris Kalaboukis wrote:
> 
> > Lasse Bunk wrote:
> > 
> > > PS. Don't know if the loading of tooltip should be moved down below jQuery or Prototype – it depends on what it relies on.
> > > 
> > > /Lasse
> > 
> > Same result....sorry ☹
> 
> I tried removing the tooltip and even moving the position of prototype above jquery. Works on load, then craps out as soon as I click on a prototype helper. Is there any way for me to reload jquery again or in some other space on the page? Can i run it in it own namespace or something??
> 
> Thanks...Chris

Any ideas? I'm at a total loss here. Prototype takes over right after the first time I use it. I'm sure that someone out the has done this. Please advise.

---

<div class="post-metadata">

**Author:** ![Lasse\_Bunk](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@Lasse\_Bunk](https://discuss.rubyonrails.org/u/Lasse_Bunk)\
**Post date:** [March 27, 2010, 11:45am UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/15 "2010-03-27T11:45:59Z")

</div>

I’m bouncing a little back’n’forth here. After reviewing the jQuery noConflict() code it doesn’t matter if you load jQuery before or after Prototype.

However, you need to switch on your javascript debugging tools so we can get some error messages – do you have Firebug or something like it?

/Lasse

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 27, 2010, 11:45pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/16 "2010-03-27T23:45:45Z")

</div>

Lasse Bunk wrote:

> I'm bouncing a little back'n'forth here. After reviewing the jQuery noConflict() code it doesn't matter if you load jQuery before or after Prototype.
> 
> However, you need to switch on your javascript debugging tools so we can get some error messages – do you have Firebug or something like it?
> 
> /Lasse

ah ha...I'm getting this error:

jQuery is not defined [Break on this error] jQuery.extend(String.prototype, {

in application.js line 29

jQuery.extend(String.prototype, { 30 databaseId: function() { return $.trim(this.split('\_').last()); } 31});

Well i think aha....whats doing that?

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [March 28, 2010, 10:20pm UTC](https://discuss.rubyonrails.org/t/prototype-helpers-jquery/50435/17 "2010-03-28T22:20:19Z")

</div>

> ah ha...I'm getting this error:
> 
> jQuery is not defined [Break on this error] jQuery.extend(String.prototype, {
> 
> in application.js line 29
> 
> jQuery.extend(String.prototype, { 30 databaseId: function() { return $.trim(this.split('\_').last()); } 31});

Any ideas?