使用ajax單擊投票按鈕時Rails自動刷新div

Question

我希望在有人單擊“投票”按鈕后自動刷新div，以計算投票總數。 投票已注冊，但不會刷新。

我已經做了這樣的事情；

<% @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 %>

和voice_up.js.erb看起來像這樣；

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

而voice_down.js.erb看起來像這樣

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

控制器動作如下所示；

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]

謝謝

Answer 1

jQuery查詢

您對JQuery和純JS感到困惑

-

您對getElementByID的調用是一個javascript調用-如Octopus-Paul ，它需要附加到document對象，因此這是您的第一個問題

第二個問題是您要在各個objects上調用html 。 .html是一個JQuery函數 ； javascript等價於.innerHTML

您最好這樣做：

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

這使用純JQuery，這應允許您將相應的數據附加到頁面