在视图中将 RoR 值传递给 javascript (JQuery)答案

【问题标题】：Passing RoR value into javascript (JQuery) in a view在视图中将 RoR 值传递给 javascript (JQuery)
【发布时间】：2011-10-26 14:10:57
【问题描述】：

我一直对下面的代码感到困惑。有人能告诉我我做错了什么，javascript 无法访问值 p 吗？谢谢！

<% p=progress_for(contest_score) %> # p is non-zero

<script type="text/javascript">
  $(function(){
      $('#contest_progressbar').progressbar({value: <%=p%>}); 
      <!--value p becomes 0 when rendered by jquery-->

      $("#contest_progressbar").css({ 'background': 'LightYellow' });
      $("#contest_progressbar > div").css({ 'background': 'Orange' });
      $('#contest_progressbar span.text').text(<%=p%>+'%')
      <!--value p becomes 0 when rendered by jquery-->

   });
</script>
progress: <%=p%> progress bar should be below: # p is the correct value here

<div id='contest_progressbar' style="margin-left:20px; height: 20px;">
  <span class="text"></span>
</div>

编辑：改为使用直接脚本标签。虽然同样的问题 EDIT2：现在似乎是一个 JQuery 问题。请参阅对 Bryan 的回答的评论中的 html

【问题讨论】：

从我所看到的理论上应该可以正常工作。当您在浏览器中“查看源代码”时，它实际上是否在 HTML 输出中打印为 processbar({value: 0})？
我假设 javascript 行末尾的 ruby cmets 是您在这里为我们添加的，是吗？
另外，您使用 JavaScript 来固定值（最好是 <span><%= text %></span>）和样式信息（最好在 CSS 文件中）有什么特别的原因吗？
更正：ghayes，是的，查看源代码显示 {value: 0}。但该值不应为零。 jaydel 是的 cmets 被添加到这个问题中，而不是在我的代码中。试着解释一下区别。 @Bryan，跨度文本代码是从 SO 示例中借用的。感谢您的建议，我会做出改变。现在，进度条正在等待！
[更正：查看源代码实际上显示了正确的非零值，我的错误。但是在 Firebug 中查看时，进度条的 div 的宽度值为 0。如果我在 Firebug 中将其更改为其他值，则会显示进度条。 ]

标签： javascript ruby-on-rails jquery-ui progress-bar actionview

【解决方案1】：

有没有可能是 jQuery 没有加载？如果您签入调试器，它可能会给您一个提示，例如$ is not defined。如果存在Prototype/jQuery 冲突（如果您使用的是 v3.1 之前的 Rails，则很有可能），它可能会静默失败。

也可能是JS代码块需要在你加载jQuery之后出现。我认为这是问题的原因是，鉴于您提供的信息，如果您正确加载了 jQuery 并且没有其他 ID 为 @ 的元素，$('#contest_progressbar span.text').text(5+'%'); 之类的东西应该总是工作987654326@.

示例：http://jsfiddle.net/6JQNe/1/

还有几点：

您需要<%= javascript_tag do %>（注意等号）来确保它能够呈现。
"#contest_progressbar > div" 不会匹配任何内容

【讨论】：

32%
确定 JQuery 在那里。不久前，我们处理了 Prototype/JQuery 问题。（顺便说一句，我们使用的是 Rails 3）。请参阅上面 Jquery 生成的 div。问题是外部 div 中的 aria-valuenow 和内部 div 中的宽度都是 0。当通过硬编码一个值创建进度条时，这将显示在上述两个值中。
关于你的第二个小点，我在这里借用了进度条着色代码：link

【解决方案2】：

问题已解决。它与 JQuery 无关。进度条的 div id 被破坏了，因为代码在一个部分中，由循环中的视图方法调用。每个调用都会覆盖相同的 div。下面的代码产生了我想要的结果。

<% pbar_id="pbar_#{contest_score.user_id}" %>

<script type="text/javascript">
  $$(function(){
      $$('#'+"<%=pbar_id%>").progressbar({'value':<%=p%>})
      $$('#'+"<%=pbar_id%>").css({ 'background':'LightYellow' });
      $$('#'+"<%=pbar_id%>"+' > div').css({ 'background':'Orange' });
   });
 </script>
progress: <%=p%>%
<div id=<%=pbar_id%> style="margin-left:20px; width:256px; height:20px;">
</div>

【讨论】：