Ho将ajax添加到投票按钮并刷新结果div

时间:2014-06-08 17:58:55

标签: ruby-on-rails ajax

我正在尝试使用按钮投票实现facebook-linke交互。我的评论页面有以下代码;

% @school_reviews.each do |school_review| %>                   
      <div class="widget-box ">                                           
        <div class="widget-header widget-header-small padding-16">                              

          <div class="widget-toolbar no-border">
            <span class="vbar"></span>                  
                    <span class="vbar"></span>
                    <small class="theme-color"> <%= school_review.created_at.strftime(" %d-%b %Y  ") %> </small>      
                  <span class="vbar"></span>                  
                  <span class="vbar"></span>
                  <% if  can? :destroy, school_review %>
                    <%= link_to(school_review, method: :delete, data: { confirm: 'Are you sure?' }, class: 'red') do %>
                      <i class="icon-trash bigger-130"></i>
                    <% end %> 
                  <% end %> 
            <span class="vbar"></span>            
          </div>                                                
        </div>
        <div class="widget-body">
          <div class="widget-main padding-16">
              <%= simple_format(school_review.description) %>  
              <div class="">
                <span class="review-votes theme-color"> 
                 <span id= <%= "up_votes_count-#{school_review.id}" %>> <%= school_review.get_likes.size  %> </span>
                 <span> 
                   <%= link_to vote_up_path(id: school_review.id), remote: true do %>           
                      <i class="fa fa-thumbs-up theme-color "></i>
                    <% end %>
                  </span>
                </span>
                <span class="review-votes theme-color">
                  <span id= <%= "down_votes_count-#{school_review.id}" %>> <%= school_review.get_dislikes.size %> </span>
                  <span> 
                    <%= link_to vote_down_path(id: school_review.id), remote: true do %>        
                      <i class="fa fa-thumbs-down theme-color "></i>
                    <% end %> 
                  </span>                
                </span>
              </div>            
          </div>  
        </div>                         
      </div>
      <div class="hr hr-12"></div>
    <% end %>

和vote_up.js.erb看起来像这样;

getElementById(<%= "up_votes_count-#{@school_review.id}" %>).html(<%= "@school_review.get_likes.size" %>);

和vote_down.js.erb看起来像这样;

getElementById(<%= "down_votes_count-#{@school_review.id}"%>).html("<%= @school_review.get_dislikes.size %>");

然而,投票数量没有被刷新。有什么帮助吗?

1 个答案:

答案 0 :(得分:1)

要使其正常运行,您需要按照以下步骤操作:

一个。为自定义操作创建路径。您已经使用down_vote_path和up_vote_path完成了这项工作。

湾将remote:true选项添加到要从中调用ajax的按钮:

<%= button_tag vote_up_path(id: school_review.id), remote: true do %>                    
  <i class="fa fa-thumbs-up theme-color "></i>
<% end %>

℃。在您的控制器方法vote_up中,您需要添加respond_to block

def vote_up
  @school = School.find(params[:id])
  @school.update(#your attribute)
  respond_to do |format|
    format.html {redirect_to your_path}
    format.js {}
  end
end

d。在vote_up.js.erb文件中,您需要更新`&lt;%= school_review.get_likes.size%&gt;。首先,你必须更改你的html,并为你想要更新的部分提供一些id或class

<span id="up_vote_count"><%= school_review.get_likes.size  %></span>

现在,您可以在js.erb文件中找到目标,这样您就可以完成

$("#up_vote_count").html("<%=j @school.likes.size >"); #need to replace the ruby part with code which'll give your like count.

这将使用新的计数来更新您的范围。您也可以按照相同的方法进行投票。

编辑:

尝试:

$("<%=j up_votes_count-#{@school_review.id} %>").html("<%= @school_review.get_likes.size %>");