Ruby on Rails中的“赞”按钮Ajax

小编典典

Ruby on Rails中的“赞”按钮Ajax

ajax

我有一个Ruby onRails项目，其中包含一个模型User和一个模型Content。我想让用户“喜欢”内容，而我使用acts_as_votable
gem 做到了这一点。

目前，喜欢的系统正在运行，但是每次按下like按钮（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

在我的routes.rb文件中，这就是我所拥有的：

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

就像我说的那样，喜欢系统运行良好，但是在用户按下喜欢计数器或喜欢按钮之后，它不会更新。取而代之的是，我调用redirect_to @content控制器动作。

我如何通过一个简单的Ajax调用来实现呢？还有另一种方法吗？

阅读 483

2020-07-26

共1个答案

小编典典

您可以通过多种方式进行操作，简单的方法如下：

准备工作

在您的工具中包括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。如果此代码段经常使用，我会将其重构为辅助方法。

让控制器用计数而不是简单地用“ 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

2020-07-26