How to get jQuery to work with Prototype

问题

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!

回答1:

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

回答2:

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.

回答3:

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

回答4:

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 the 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.

来源：https://stackoverflow.com/questions/2528670/how-to-get-jquery-to-work-with-prototype

标签

jquery

ruby-on-rails

prototypejs

conflict