更新＆＃39;喜欢＆＃39;使用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路由没有嵌套在帖子中。我更改了它，并且还更改了后续的like和不同路径以反映嵌套更改（分别为post_likes_path和post_like_path）。我还将我喜欢的控制器中的destroy方法调整为@like = Like.find(params[:id]).destroy。最后，我将@like作为不同路径中的变量传递，以便整个路径显示为：post_like_path(@like, post_id: post.id)

Answer 1

您需要在您喜欢或不同于_like_post.html.erb和create.js.erb

的帖子时重新呈现部分文件destroy.js.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();

希望这有帮助。 ：）