Ruby on Rails - AJAX - div 问题
我是 Rails 新手,所以对我要轻松一些。我已经建立了一个博客,并且正在尝试向 /posts/index.html.erb 页面添加“投票”类型功能。有点像 Facebook 的点赞功能。我可以成功地让投票表格发挥作用。我已经成功地通过 <% @posts.each do |post| 获取帖子渲染器。 %>称呼。这就是我遇到问题的地方。然后,我在上面告诉索引,还为每个帖子渲染投票表单以及 <%= post.votes.count %>显示每个帖子的总票数并允许提交每个帖子的表格。我使用 AJAX 来让这一切协同工作。
由于我的 /votes/create.js.rjs 的工作方式,它将结果发送到 div id="votes",并在 <% @posts.each do |post| 中%>我换行 <%= post.votes.count %>在 votes div 标签中。但是当create.js.rjs发送数据时,它只更新渲染的html页面上的第一个div标签。
因此,如果您可以想象,就像在 Facebook 上一样,当您单击您喜欢的内容时,更新不会发生在您刚刚单击的帖子上,而是会返回到页面顶部的另一篇帖子(即第一篇帖子)上。投票计数是由您单击的元素表示的,但它位于错误的记录中。
这是代码:
POSTS/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 %>
I am new to rails so go easy on me. I have built a blog and I am attempting to add a "vote up" type feature to the /posts/index.html.erb page. Kind of like Facebooks's like feature. I have can successfully get the vote form to work. I have successfully been able to get the posts rendererd out through the <% @posts.each do |post| %> call. Here is where I have the problem. I then tell index, in the above, to also render for each post the vote form and also the <%= post.votes.count %> to display the total votes for each post and allow for submitting the form for each post. I am using AJAX to allow this all to work together.
Because of the way my /votes/create.js.rjs works it send the result to div id="votes", and in the <% @posts.each do |post| %> I wrap <%= post.votes.count %> in the votes div tag. But when create.js.rjs sends the data, it only updates the first div tag on the rendered html page.
So if you can imagine, like on facebook, when you click that you like something, the update happens not on the post you just clicked but back at the top of the page on another post, the first post. The vote count is represented from the element you clicked but it is on the wrong record.
Here is the code:
POSTS/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 %>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
首先检查实际渲染的 html,看看每个元素是否有唯一的 id。如果没有(并且有多个具有相同id的元素),JS将默认更新列表中的第一个元素。您将需要某种方式来唯一地标识您要更新的元素。您始终可以做一个简单的操作
,然后标记每个元素
,然后将
i
传递给您的 rjs,以便它知道正在更新哪个字段的计数。Check the actual rendered html first to see if there are unique ids for each of the elements. If not (and there are multiple elements with the same id), JS will default to update the first element in the list. You will need someway to uniquely identify which element you want to update. You can always do a simple
and then tag each element with
and then pass
i
to your rjs so it knows which field it is updating the count for.我不完全理解这个问题。您是说,当您单击投票时,它会更新错误帖子的计数?
假设是这种情况,我认为你的问题是你没有唯一地标识 html 中的每个帖子。旁注,这些 div 等应该是类,这不是有效的 html。无论如何,您希望每个帖子都有一个具有唯一标识 ID(例如 post_1、post_2 等)的 div,并且应与您的 ajax 请求一起发送,以便响应知道要更新哪个 div。
这里的一个技巧与您的问题无关,是将整个循环放入部分循环中并使用 :collection 渲染它。制作出更好的代码。
I don't fully understand the question. You're saying that when you click vote, it updates the count on the wrong post?
Assuming that's the case, I think your problem is that you're not uniquely identifying each post in your html. Side note, those divs etc shoudl be classes, that's not valid html. Anyway, you want each post to have a div with a unique identifying id say post_1, post_2 etc, and that should be sent with your ajax request, so the response knows which div to update.
One tip here, not related to your question, is to put that whole loop into a partial and render it with :collection. Makes for much nicer code.