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:
<%= 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' %>
I looked here and I tried that:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
By editing the prettyphoto block like so:
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
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
2010/3/26 Chris K. [email protected]
Lasse B. 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:
Does it work then?
/Lasse
2010/3/26 Chris K. [email protected]
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?
Hmm, strange – do you get some sort of javascript error?
/Lasse
2010/3/26 Chris K. [email protected]
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
2010/3/26 Chris K. [email protected]
Chris K. wrote:
Lasse B. wrote:
Hmm, strange – do you get some sort of javascript error?
/Lasse
2010/3/26 Chris K. [email protected]
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?
Lasse B. wrote:
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
2010/3/26 Chris K. [email protected]
Yes, prototype does work, once I remove those lines…but of course
jquery doesn’t.
Lasse B. wrote:
Hmm, strange – do you get some sort of javascript error?
/Lasse
2010/3/26 Chris K. [email protected]
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
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
2010/3/26 Chris K. [email protected]
Lasse B. wrote:
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
2010/3/26 Chris K. [email protected]
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.
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
2010/3/26 Lasse B. [email protected]
Chris K. wrote:
Lasse B. 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
2010/3/26 Lasse B. [email protected]
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
Chris K. wrote:
Chris K. wrote:
Lasse B. 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
2010/3/26 Lasse B. [email protected]
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.
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
2010/3/27 Chris K. [email protected]
Lasse B. 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
2010/3/27 Chris K. [email protected]
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?