使用ajax点击投票按钮的Rails autorefresh div [英] Rails autorefresh div on clicking voting button using ajax

问题描述

我希望在有人点击投票按钮后自动刷新一个div来计算总票数。投票已经登记，但不会令人耳目一新。

I wish to auto refresh a div calculating the total number of votes after someone has clicked the vote button. The vote is registered but the refreshing does not happen.

我做过类似的事情;

<% @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="voting-banner">
            <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看起来像这样;

and vote_up.js.erb looks like this;

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

而vote_down.js.erb看起来像这个

while vote_down.js.erb looks like thisl

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

并且控制器操作如下所示;

and the controller action look like this;

def vote_up
  @school_review = SchoolReview.find(params[:id])
  @school_review.liked_by current_user

   respond_to do |format|
      #format.html {redirect_to school_reviews_path}
      format.js { }
    end    
end

def vote_down
  @school_review = SchoolReview.find(params[:id])
  @school_review.downvote_from current_user

   respond_to do |format|
      #format.html {redirect_to school_reviews_path}
      format.js { }
    end    
end

在控制台中，我得到

    GET http://0.0.0.0:3000/vote_up [HTTP/1.1 200 OK  290ms]
GET http://0.0.0.0:3000/vote_up [HTTP/1.1 304 Not Modified  86ms]

谢谢

推荐答案

JQuery

你感到困惑纯JS

-

您的 getElementByID 是一个javascript调用 - 需要附加到文档 对象，如 所述八达通保罗 ，这是你的第一个问题

Your call of getElementByID is a javascript call - and needs to be attached to the document object, as mentioned by Octopus-Paul, so that's your first problem

第二个问题是你正在调用 html 分别对应对象。 .html 是一个JQuery函数;相当于javascript的 .innerHTML

The second issue is you're calling html on the respective objects. .html is a JQuery function; the javascript equivalent being .innerHTML

你最好这样做：

#app/views/controller/action.html.erb
$("<%=j 'up_votes_count-#{@school_review.id}' %>").html("<%=j @school_review.get_likes.size %>");

这使用纯JQuery，它允许您将相应的数据附加到页面

This uses pure JQuery, which should allow you to append the respective data to your page

这篇关于使用ajax点击投票按钮的Rails autorefresh div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！