AJAX更新微博投票赞成/反对部分仅刷新最近的博文 [英] AJAX to update micropost vote up/down partial only refreshes the most recent post

问题描述

使用Rails 3，JRuby.

Using Rails 3, JRuby.

我想为我的Rails社交应用程序合并一个投票"和投票"评级，这使用户可以从本质上喜欢和不喜欢帖子.效果很好，但是每当有帖子被投票时都会刷新整个页面.为了解决这个问题，我想实现部分刷新，该更新只会在帖子供稿中更新特定的帖子得分.

I wanted to incorporate a "vote up" and "vote down" rating for my Rails social application, that allows users to essentially like and dislike posts. This worked great, however refreshed the whole page whenever a post was voted on. To solve this, I wanted to implement a partial refresh that would only update that particular post score, within the post feed.

我按照惯常的模式实施AJAX部分刷新，但是结果与我的想法并不完全相同.它不会刷新我喜欢/不喜欢的帖子，而是使用我刚刚喜欢/不喜欢的帖子的新分数刷新最新的帖子.

I followed my usual pattern to implementing AJAX partial refreshing, however, the outcome isn't quite what I had in mind. Instead of refreshing the post I like/dislike, it refreshes the most recent post with the new score of the post I just liked/disliked.

我将其识别为部分刷新问题，因为当我手动刷新整个页面时，每个帖子都有其正确的喜欢/不喜欢评分(包括我打算更改的评分).我认为问题在于我的页面使用"do block"将帖子呈现到页面的方式.我的问题是，我不知道如何获得正确刷新我投票的微博所期望的行为.这是我的一些代码:

I've identified this as a partial refreshing problem, because when I refresh the whole page manually, each post has its correct like/dislike score (including the one I intended to alter). I believe the problem is to do with the way my page renders posts to the page using a "do block". My problem is, I cannot figure out how to get the desired behaviour of correctly refreshing the micropost I voted on. Here is some of my code:

_micropost.html.erb(部分)

_micropost.html.erb (partial)

<% microposts.each do |mp| %>
<div class="profile_block gradient ">
    <!-- Header -->
    <header class="top-bar">
        <small class="badge sharp">Post</small>
        <!-- post/ article options -->
        <% if mp.user_id == current_user.id %>       
          <%= link_to '<span class="glyphicon glyphicon glyphicon-cog"></span>'.html_safe, '#', class: "comment_link pull-right"%>
        <% end %>

        <%= link_to '<span class="glyphicon glyphicon glyphicon-heart"></span>'.html_safe, increment_micropost_path(mp.id), class: "comment_link pull-right", :remote => true%>

        <%= link_to '<span class="glyphicon glyphicon glyphicon-thumbs-down"></span>'.html_safe, decrement_micropost_path(mp.id), class: "comment_link pull-right", :remote => true %>

        <div id="global" class="pull-right badge"><%= render :partial => 'microposts/rating', :locals => {:micro => mp} %></div>
    </header> 
(....)
<% end %>
</div>

_home.html.erb

_home.html.erb

(....)
<div id="gf" class="left_col">          
    <%= render :partial => 'microposts/micropost', :locals => {:microposts => @microposts }, :remote => true %>
</div>
(....)

我的_rating.html.erb部分(显示信息的位)

my _rating.html.erb partial (the bit that displays the information)

<%= micro.rating.to_i %>

控制器(我只显示增量方法，它们几乎相同

controller (i'll just show the increment method, they're both near identical

#increments micropost rating by 1
def increment
    @micropost = Micropost.find(params[:id])
    @increment = lambda { |micropost| micropost.update_attribute(:rating, micropost.rating.to_i + 1) }
    @increment.call @micropost
    respond_to do |format|
        format.html {redirect_to root_url}
        format.js
    end
end

以及相应的creation.js.html

and the corresponding increment.js.html

$('#global').html("<%= escape_javascript render :partial => 'microposts/rating', :locals => {:micro => @micropost} %>"); 

我在上面提到微站的实际递增/递减功能可以正常工作-它只是使用行为不正常的AJAX重新呈现此信息. 有什么想法，请分享.

I mentioned above that the actual incrementing/ decrementing feature of the micropost works fine- it's just re-rendering this information using AJAX that's not behaving as intended. Any ideas, please share.

推荐答案

原因是您的代码中有多个div#global(由于each循环)，因此浏览器将仅识别第一个.将global从一个id更改为一个类，然后它应该可以工作.我还将在div上添加一个data-num属性，并将其分配给数据库对象的id(不要与HTML id混淆).像这样:

The reason is that you have multiple div#global in your code (because of the each loop), so the browser will only recognize the first one. Change global from an id to a class and then it should work. I would also add a data-num attribute to the div and assign it the id of the database object (not to be confused with the HTML id). Something like this:

<div class="pull-right badge global" data-num="<%= mp.id %>"><%= render :partial => 'microposts/rating', :locals => {:micro => mp} %></div>

然后，在您的increment.js.erb中(我认为您的意思是代替.js.html ...)，将其更改为:

Then, in your increment.js.erb (I think you meant that instead of .js.html...), change it to:

$('div.global[data-num="<%= @micropost.id %>"]').html("<%= escape_javascript render :partial => 'microposts/rating', :locals => {:micro => @micropost} %>");

那样，JavaScript将始终知道要更新哪个，因为它基于数据库ID.

That way, the JavaScript will always know which one to update because it's based on the database ID.

这篇关于AJAX更新微博投票赞成/反对部分仅刷新最近的博文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！