Ruby on Rails - AJAX - div问题

时间:2009-11-20 15:14:53

标签: ruby-on-rails ruby ajax blogs

我是铁杆新手,所以对我很轻松。我已经构建了一个博客,我正在尝试向/posts/index.html.erb页面添加“投票”类型功能。有点像Facebook的功能。我可以成功地获得投票表格。我已成功通过<%@ posts.each do | post |获取了rendererd的帖子%GT;呼叫。这是我遇到问题的地方。然后,我告诉索引,在上面,也为每个帖子呈现投票表格以及<%= post.votes.count%>显示每个帖子的总票数,并允许提交每个帖子的表格。我正在使用AJAX来让这一切能够协同工作。

由于我的/votes/create.js.rjs的工作方式,它将结果发送到div id =“votes”,并在<%@ posts.each do | post | %GT;我换了<%= post.votes.count%>在投票div标签。但是当create.js.rjs发送数据时,它只更新渲染的html页面上的第一个div标签。

所以,如果你可以想象,就像在Facebook上,当你点击你喜欢的东西时,更新不会发生在你刚刚点击的帖子上,而是发布在另一篇文章页面顶部的第一篇文章中。投票计数由您单击的元素表示,但它在错误的记录中。

以下是代码:

文章/ INDEX.HTML.ERB

<% @posts.each do |post| %>
  <%= render :partial => post %>
  <%= render :partial => @post %>
 <div id="beltcomments">
  <div id="beltcommenttext">
    <div id="votebutton">
    <% remote_form_for [ post, Vote.new] do |f| %>
    <%= f.hidden_field :vote, :value => '1' %>
    <%= submit_tag '', :class => 'voteup' %>

    </div>
   <div id="vote"><br/>

     <%= post.votes.count %> People like the above BattleCry. <br/>

    <%= link_to "Comments (#{post.comments.count})", post %>
   </div>

   </div>
</div>

<br/>
<br/>
<br/>
<br/>

<% end %>
<% end %>

<div id="commenttime">
Copyright 2009, My Life BattleCry, LLC. 
</div>

/POSTS/CREATE.JS.RJS

page.replace_html  :votes, :partial => @vote
page[@vote].visual_effect :highlight

/POSTS/_VOTE.HTML.ERB

<% div_for vote do %>
  <%= @post.votes.count %> with your vote. Awesome!!!
  <div id="commenttime">
   Thanks for your vote. <br/>
   </div>

 <% end %>

2 个答案:

答案 0 :(得分:1)

首先检查实际渲染的html,看看每个元素是否都有唯一的ID。如果不是(并且有多个具有相同id的元素),JS将默认更新列表中的第一个元素。您将需要以某种方式唯一标识要更新的元素。你总是可以做一个简单的

<% @posts.each_with_index do |post, i| %>

然后用

标记每个元素
<%= f.hidden_field "vote-#{i}", :value => '1' %>

然后将i传递给你的rjs,以便知道它正在更新计数的字段。

答案 1 :(得分:0)

我不完全理解这个问题。你说当你点击投票时它会更新错误帖子上的点数?

假设是这种情况,我认为你的问题是你没有唯一识别你的html中的每个帖子。旁注,那些div等等都是类,这不是有效的HTML。无论如何,你希望每个帖子都有一个div,其中有一个唯一的识别ID,如post_1,post_2等,这应该与你的ajax请求一起发送,所以响应知道要更新哪个div。

这里的一个提示,与您的问题无关,是将整个循环放入部分并使用:collection进行渲染。使代码更好。