Prototype Helpers & jQuery

rubyonrails-talk
1

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>   <%= 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' %> </head> <body> <script type="text/javascript" charset="utf-8">   $(document).ready(function(){   $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script>

I looked here and I tried that:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

By editing the prettyphoto block like so:

<script type="text/javascript" charset="utf-8">         jQuery.noConflict();   jquery(document).ready(function(){   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

2

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

3

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">   jQuery.noConflict();   jQuery(document).ready(function() {     jQuery("a[rel^='prettyPhoto']").prettyPhoto();   }); </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?

4

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

/Lasse

5

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

6

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

7

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?

8

Lasse Bunk 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

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

9

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

10

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

11

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">    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">   jQuery(document).ready(     function() {       jQuery("a[rel^='prettyPhoto']").prettyPhoto();     }); </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.

12

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 :frowning:

13

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 :frowning:

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

14

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 :frowning:

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.

15

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

16

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?

17

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?