如何使用 AJAX 在索引视图上喜欢对象？

Posted 2023-05-09

【中文标题】如何使用 AJAX 在索引视图上喜欢对象？

【英文标题】：How to like object on index view with AJAX?

【发布时间】：2020-09-21 15:58:08

【问题描述】：

我在 rails 应用中有用户喜欢的对象。它工作正常。但我正在尝试将ajax 功能添加到like 按钮，所以当我点击它时，它会自动更新。

它适用于索引列表中的第一个对象，但其他对象不通过 ajax 更新。

我认为这与我使用类的事实有关。我将如何进行可能的更改以使用 ID 来确保每个对象都可以更新。我尝试过使用 ID，但我没有在这里做任何事情。有什么想法吗？

这是我的 vote.js.erb 文件

    <% if current_user.liked? @candidate %>
         $('.like-btn').removeClass('liked');
     <% else %> 
         $('.like-btn').addClass('liked');
    <% end %>  
        $('.likes-count').html("<%= @candidate.get_upvotes.size %>")

这是我的看法

       <%= link_to like_candidate_path(candidate), class: "like-btn", method: 
       :put, remote: :true do %> 
       <div>
           <span><p><i class="fa fa-thumbs-up"></i></p></span>
       </div>
       <% end %> 
       <span class="likes-count"><%= candidate.get_upvotes.size %></span>

【参考方案1】：

在你看来，

<%= link_to like_candidate_path(candidate), class: "like-btn",id:"like_button_#candidate.id" method: 
       :put, remote: :true do %> 
<span class="likes-count" id="likes_count#candidate.id"><%= candidate.get_upvotes.size %></span>

在您的控制器中，

def vote
   #Your code to udpate here
   respond_to do |format|
      format.js
   end
end

在你的 vote.js.erb 中

<% if current_user.liked? @candidate %>
  $('#like_button_<%=@candiate.id%>').removeClass('liked');
<% else %> 
  $('#like_button_<%=@candiate.id%>').addClass('liked');
<% end %>  
$('#like_count_<%=@candiate.id%>').html("<%= @candidate.get_upvotes.size %>")

希望这会有所帮助！

【讨论】：

由于某种原因不起作用。记录正在更新，但不是通过 ajax 刷新。重要的是要注意，我必须修正你的一些 @candiate 拼写是正确的，然后我也修正了 likes_count 为 like_count 但这仍然没有成功:(