使用 Ajax 更新 Rails 中的“喜欢”计数

Question

我研究了许多关于此主题的其他 SO 帖子，但似乎找不到与我的情况相匹配的帖子。

我的网站有帖子，用户可以点赞，增加点赞数。如果我在没有 Ajax 的情况下执行此操作并且只使用页面刷新，则计数器会正确递增并且按钮会根据需要更改颜色。事实上，我的 Ajax 代码在单击时改变了按钮的颜色，只是点赞数没有增加。

服务器日志似乎也显示请求被处理为JS并持久化到数据库，那么为什么没有刷新计数呢？

likes_controller.rb

def create
    @post = Post.find(params[:post_id])
    @like = @post.likes.create(user_id: current_user.id)
    respond_to do |format|
      format.html {redirect_to :back}
      format.js {}
    end
end

def destroy
    @like = Like.find_by(post_id: params[:post_id], user_id: params[:user_id]).destroy
    respond_to do |format|
      format.html {redirect_to :back}
      format.js {}
    end
end

_like_post.html.erb

<% if current_user.already_likes?(post) %>
    <%= link_to "<i class='fa fa-thumbs-up icon'></i>#{post.likes.count}".html_safe, like_path(post_id: post.id, user_id: current_user.id), method: :delete, class: 'btn btn-default stat-item active', id: "unlike-post", remote: true %>
<% else %>
    <%= link_to "<i class='fa fa-thumbs-up icon'></i>#{post.likes.count}".html_safe, likes_path(post_id: post.id), method: :post, class: 'btn btn-default stat-item', id: "like-post", remote: true %>
<% end %> 

create.js.erb

$("#unlike-post").show();

destroy.js.erb

$("#like-post").show();

编辑：

我最初在解决方案中遇到错误，因为我的 likes 路由没有嵌套在帖子中。我改变了它，还改变了随后的类似和不同路径以反映嵌套变化（分别为post_likes_path 和post_like_path）。我还将我的喜欢控制器中的销毁方法调整为@like = Like.find(params[:id]).destroy。最后，我将@like 作为变量传递给了like 路径，这样整个路径就变成了：post_like_path(@like, post_id: post.id)

Answer 1

当你喜欢或不喜欢create.js.erb和destroy.js.erb的帖子时，你需要重新渲染部分文件_like_post.html.erb

您有$("#unlike-post").show();，但它不会更新页面中的任何内容； .show() 唯一的作用（等效地）是将元素的 css 更改为 display: block。

说了这么多，下面应该可以正常工作了

_like_post.html.erb

<div id='like-post-container'>
  <% if current_user.already_likes?(post) %>
      <%= link_to "<i class='fa fa-thumbs-up icon'></i>#{post.likes.count}".html_safe, like_path(post_id: post.id, user_id: current_user.id), method: :delete, class: 'btn btn-default stat-item active', id: "unlike-post", remote: true %>
  <% else %>
      <%= link_to "<i class='fa fa-thumbs-up icon'></i>#{post.likes.count}".html_safe, likes_path(post_id: post.id), method: :post, class: 'btn btn-default stat-item', id: "like-post", remote: true %>
  <% end %>
</div>

create.js.erb

$('#like-post-container').html('<%= j render partial: "likes/like_post", locals: {post: @post} %>');

destroy.js.erb

$('#like-post-container').html('<%= j render partial: "likes/like_post", locals: {post: @like.post} %>');

请注意，这种方法将重新创建元素。如果您在这些元素上有 JS 绑定，它将被删除，并且可能无法正常工作。如果您有绑定，那么您将不得不直接更新计数值，而不是像我上面的实现那样。

Answer 2

只需更新您的 js.erb 字段即可更新计数

create.js.erb

$("#unlike-post").html("<%= j "<i class='fa fa-thumbs-up icon'></i>#{@post.likes.count}".html_safe %>")
$("#unlike-post").show();

destroy.js.erb

$("#like-post").html("<%= j "<i class='fa fa-thumbs-up icon'></i>#{@like.post.likes.count}".html_safe %>")
$("#like-post").show();

希望对您有所帮助。 :)