3

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

4 回答 4

6

您应该使用jQuery.noConflict();并且在此之后对 jquery 的所有调用都应该只jQuery()使用of $()

于 2010-03-27T09:55:18.760 回答
0

在以下文件中将$符号更改为 jQuery

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

首先包含 jquery 文件，然后包含原型。

希望它能解决问题

于 2010-04-25T07:09:31.007 回答
0

看起来你快到了。我想你想要这样的东西：

<%= 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>

我不确定您在 jQuery 网站上找到了什么示例，但 jQuery("div").hide(); 看起来它隐藏了您页面上的所有 div，这就是您的页面消失的原因。没有冲突是你需要的。

javascript 的重新排序包括如上意味着您可以将内联 JS 包含在 application.js 中，有些人会认为这更整洁。

于 2010-03-29T18:27:53.907 回答
0

你可以做很多事情。

其中之一是检查加载 javascript 标签的顺序。通常应用程序应该在最后。

如果您使用 jrails，则根本不需要加载原型和脚本库。

我谦虚地建议您尝试以下方法：

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

由于您正处于开发周期的开始阶段，您可以只使用 jquery 库并完全消除原型。在 jQuery 方面有更多的选择。

我并不是说这是每个人都应该做的，但在您的具体情况下，这似乎是合理的。

于 2010-03-27T12:20:13.027 回答