views:

476

answers:

4

Ok so here is the situation. Been pulling my hair out on this one.

I'm a noob at this. Only been using rails for about 6 weeks. I'm using the standard setup package, and my code leverages prototype helpers heavily. Like I said, noob ;)

So I'm trying to put in some jQuery effects, like PrettyPhoto. But what happens is that when the page is first loaded, PrettyPhoto works great. However, once someone uses a Prototype helper, like a link created with link_to_remote, Prettyphoto stops working.

I've tried jRails, all of the fixes proposed on the JQuery site to stop conflicts...

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

...even done some crazy things likes renaming all of the $ in prototype.js to $$$ to no avail. Either the prototype helpers break, or jQuery breaks.

Seems nothing I do can get these to work together.

Any ideas?

Here is part of my application.html.erb

<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'tooltip' %>
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag "jquery.prettyPhoto" %>
<%= javascript_include_tag 'prototype' %>
<%= javascript_include_tag 'scriptalicious' %>
</head>
<body>
<script type="text/javascript" charset="utf-8">
  jQuery(document).ready(
    function() {
      jQuery("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

If I put prototype before jquery, the prototype helpers don't work If I put the noconflict clause in, neither works.

Thanks in advance!

Chris

BTW: when I try this, from the jQuery site:

<script>
 jQuery.noConflict();

 // Use jQuery via jQuery(...)
 jQuery(document).ready(function(){
   jQuery("div").hide();
 });

 // Use Prototype with $(...), etc.
 $('someid').hide();
</script>

my page disappears!

+4  A: 

you should use JQuery.noConfilct(); and after this all calls to jquery should be done only using the JQuery() instead of $()

Omu
I tried that as well, but that did not work either.
thinkfuture
A: 

There are a number of things you can do.

One of them is to check the order in which you load your javascript tags. Typically application should come at the end.

If you use jrails you don't need to load the prototype and scriptaculous libraries at all.

I humbly suggest you try tho following:

<%= javascript_include_tag 'jquery', 'jquery-ui', 'tooltip', 'jquery.prettyPhoto', 'application' %>

Since you are at the beginning of your development cycle you could use only jquery libraries and eliminate prototype altogether. There is so much more choice on the jQuery side.

I'm not saying this is what everybody should do but in your specific case it seems reasonable.

allesklar
Thanks! I do plan to move to jQuery fully at some point, but for the moment my app needs to work.Allesklar, I edited my include tags as you noted but then my prototype links stopped working.
thinkfuture
Try adding prototype and scriptaculous before the 'tooltip' one.
allesklar
i did that and it makes no difference.
thinkfuture
if you need prototype just to use helpers such as link_to_remote and such you should just forget about it, remove prototype and scriptaculous libraries and add instead the jrails library. That will take care of all those helpers. If you do this do NOT use the 'noconflict' clause.<%= javascript_include_tag 'jquery', 'jquery-ui', 'jrails', 'tooltip', 'jquery.prettyPhoto', 'application' %>
allesklar
A: 

Looks like you're almost there. I think you want something like this:

<%= javascript_include_tag 'prototype' %>
<%= javascript_include_tag 'scriptalicious' %>
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag "jquery.prettyPhoto" %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'tooltip' %>

<script type="text/javascript">
  jQuery.noConflict();

  // Use jQuery via jQuery(...)
  jQuery(document).ready(
    function() {
      jQuery("a[rel^='prettyPhoto']").prettyPhoto();
  });

  // Use Prototype with $(...), etc.
  $('someid').hide();
</script>

I'm not sure what example you found on the jQuery site, but jQuery("div").hide(); looks like it is hiding all the divs on your page, which is why your page disappears. The no conflict is what you need.

Reordering of the javascript includes as above means you can include your inline JS in application.js instead, which some would consider neater.

Tim Fountain
Thanks Tim! I tried this but then my prototype links are hosed. :(
thinkfuture
Are you doing anything with the $ function in application/tooltip.js? If you move application/tooltip.js to after the </script> in the noConflict block does this make any difference?
Tim Fountain
A: 

change $ symbol to jQuery in these following files

<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag "jquery.prettyPhoto" %>

include jquery file first and then include prototype.

Hope it will solve the problem

Fero