Rails Acts_as_votable Gem Like /與Ajax不同的按鈕

Question

我是Ruby On Rails的新手，我使用acts_as_votable gem來創建Like和不同的按鈕，使用戶喜歡和不像Posts但我不能讓他們從Like變為不同（和反之）並且每次他們更新計數器單擊而不刷新頁面。 我嘗試過其他類似的答案，但我沒有運氣。 沒有我試圖實現Ajax的混亂更改，我的代碼看起來像這樣：

Post Model acts_as_votable和User Model acts_as voter

帖子控制器有

def like
  @post = Post.find(params[:id])
  @post.liked_by current_user
  redirect_to :back
end

def unlike
  @post = Post.find(params[:id])
  @post.unliked_by current_user
  redirect_to :back
end

路線有

resources :posts do
  member do
    put 'like', to: "posts#like"
    put 'unlike', to: "posts#unlike"
  end
end

查看了

<%= @post.get_likes.size%>
  <% if @post.get_likes.size ==1 %>
    person like this
  <% else %>
   people like this
<% end %>


<div class="btn-group">

  <% if (current_user.liked? @post) %>
    <%= link_to unlike_post_path(@post), method: :put, class: "btn btn-default btn-sm" do %>
    <span class="glyphicon glyphicon-chevron-down"></span>
      Unlike
    <%end %>

  <% else %>

    <%= link_to like_post_path(@post), method: :put, class: "btn btn-primary btn-sm" do %>
    <span class="glyphicon glyphicon-chevron-up"></span>
      Like
    <% end %>
  <% end %>

</div>

我閱讀了很多關於Ajax的答案，但我無法復制結果。 先感謝您！

Answer 1

首先，您需要指出您的帖子控制器以響應js格式 。 然后posts_controller的兩個動作變為：

def like
  @post = Post.find(params[:id])
  @post.liked_by current_user
  respond_to do |format|
    format.html { redirect_to :back }
    format.js { render layout: false }
  end
end

def unlike
  @post = Post.find(params[:id])
  @post.unliked_by current_user
  respond_to do |format|
    format.html { redirect_to :back }
    format.js { render layout: false }
  end
end

其次，您需要在鏈接上傳遞remote: true ：

 <div class="votes">
    <% if current_user.liked? @post %>
       <%= link_to unlike_post_path(@post), method: :get, remote: true, class: 'unlike_post' %>
     <% else %>
       <%= link_to like_post_path(@post), method: :get, remote: true, class: 'like_post' %>
     <% end %>
  </div>

我更改method: :put to method: :get ，所以在config/routes.rb更改它，並在鏈接中添加一個類以在js中綁定它。

最后，您需要在app/views/posts/創建2個視圖：

• like.js.erb

   $('.like_post').bind('ajax:success', function(){ $(this).parent().parent().find('.vote_count').html('<%= escape_javascript @post.votes_for.size.to_s %>'); $(this).closest('.like_post').hide(); $(this).closest('.votes').html(' <%= link_to "Unlike", unlike_post_path(@post), remote: true, method: :get, class: 'unlike_post' %>'); }); 

• unlike.js.erb

   $('.unlike_post').bind('ajax:success', function(){ $(this).parent().parent().find('.vote_count').html('<%= escape_javascript @post.votes_for.size.to_s %>'); $(this).closest('.unlike_post').hide(); $(this).closest('.votes').html(' <%= link_to "Like", like_post_path(@post), remote: true, method: :get, class: 'like_post' %>'); }); 

要處理計數更新，我使用.vote_count類，因此在您的視圖中：

<div class="vote_count">
  <%= @post.get_likes.size %>
</div> 

所以我的看法：

<div>
  <div class="vote_count">
    <%= @post.get_likes.size %>
  </div> 

  <div class="votes">
    <% if current_user.liked? @post %>
      <%= link_to unlike_post_path(@post), method: :get, remote: true, class: 'unlike_post' %>
    <% else %>
      <%= link_to like_post_path(@post), method: :get, remote: true, class: 'like_post' %>
    <% end %>
  </div>
</div>

編輯：我編輯我的答案。 使用class而不是id更新您的鏈接。 並查看2 js視圖以找到最近的（） 。 它適用於我的沙盒應用程序中的索引和顯示頁面。 所以請隨意適應您的標記。