就像Ruby on Rails中的Ajax按钮

Like button Ajax in Ruby on Rails

本文关键字：Ajax 按钮中的 Rails Ruby on 就像更新时间：2023-09-26

我有一个Ruby on Rails项目，其中模型User和模型Content。我想让用户"喜欢"一个内容成为可能，我已经用acts_as_votable gem实现了这一点。

目前，点赞系统正在工作，但每次点赞按钮(link_to)时，我都会刷新页面。

我想使用Ajax做到这一点，以便更新按钮和喜欢计数器，而不需要刷新页面。

在我的Content -> Show视图，这是我有:

<% if user_signed_in? %>
  <% if current_user.liked? @content %>
      <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put %>
  <% else %>
      <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put %>
  <% end %>
  <span> · </span>
<% end %>
<%= @content.get_likes.size %> users like this
<br>

Content控制器对喜欢/不喜欢这样做:

def like
    @content = Content.find(params[:id])
    @content.liked_by current_user
    redirect_to @content
end
def dislike
    @content = Content.find(params[:id])
    @content.disliked_by current_user
    redirect_to @content
end

在我的路线。

resources :contents do
    member do
        put "like", to: "contents#like"
        put "dislike", to: "contents#dislike"
    end
end

就像我说的，点赞系统工作得很好，但是在用户按下它之后，不更新点赞计数器和点赞按钮。相反，为了欺骗它，我在控制器动作中调用redirect_to @content。

我怎么能实现这与一个简单的Ajax调用?还有别的办法吗?

您可以通过多种方式做到这一点，最简单的方法如下:

<<h2>准备/h2>

包括Rails UJS和jQuery在您的application.js(如果还没有这样做):

//= require jquery
//= require jquery_ujs

将remote: true添加到您的link_to助手:

<%= link_to "Like", '...', class: 'vote', method: :put, remote: true %>

让控制器以非重定向的方式响应AJAX请求:

def like
  @content = Content.find(params[:id])
  @content.liked_by current_user
  if request.xhr?
    head :ok
  else
    redirect_to @content
  end
end

高级行为

您可能想要更新"n个用户喜欢这个"的显示。按照以下步骤进行存档:

为你的计数器值添加一个句柄，这样你就可以在JS中找到它:
```
<span class="votes-count" data-id="<%= @content.id %>">
  <%= @content.get_likes.size %>
</span>
users like this
```
还请注意使用data-id，而不是id。如果经常使用这个代码片段，我将把它重构成一个helper方法。
让控制器回答计数，而不是简单的"OK"(加上一些信息来查找页面上的计数器;键是任意的):
```
#…
if request.xhr?
  render json: { count: @content.get_likes.size, id: params[:id] }
else
#…
```

构建一个JS(我更喜欢CoffeeScript)对AJAX请求作出反应:

# Rails creates this event, when the link_to(remote: true)
# successfully executes
$(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
  # the `data` parameter is the decoded JSON object
  $(".votes-count[data-id=#{data.id}]").text data.count
  return

同样，我们使用data-id属性，只更新受影响的计数器。

切换状态

要动态地将链接从"喜欢"更改为"不喜欢"，反之亦然，您需要进行以下修改:

修改视图:

<% if current_user.liked? @content %>
  <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(@content), id: @content.id } %>
<% else %>
  <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(@content), id: @content.id } %>
<% end %>

再次:这应该进入一个助手方法(例如vote_link current_user, @content)。

和你的CoffeeScript:

$(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
  # update counter
  $(".votes-count[data-id=#{data.id}]").text data.count
  # toggle links
  $("a.vote[data-id=#{data.id}]").each ->
    $a = $(this)
    href = $a.attr 'href'
    text = $a.text()
    $a.text($a.data('toggle-text')).attr 'href', $a.data('toggle-href')
    $a.data('toggle-text', text).data 'toggle-href', href
    return
  return