Ruby on Rails中的“赞”按钮Ajax

Ruby on Rails中的“赞”按钮Ajax

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

准备工作

1. 在您的工具中包括Rails UJS和jQuery

   application.js

   （如果尚未这样做的话）：

        //= require jquery    //= require jquery_ujs

1. 添加

   remote: true

   到您的

   link_to

   助手：

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

2. 让控制器对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个用户喜欢此”显示。要存档，请按照下列步骤 *** 作：

1. 向您的计数器值添加一个句柄，以便稍后可以使用JS找到它：

        <span  data-id="<%= @content.id %>">      <%= @content.get_likes.size %>    </span>    users like this

还请注意使用

data-id

，而不是

id

。如果此代码段经常使用，我会将其重构为辅助方法。

1. 让控制器用计数而不是简单地用“ OK”来回答（加上一些信息以在页面上找到计数器；键是任意的）：

        #…    if request.xhr?      render json: { count: @content.get_likes.size, id: params[:id] }    else    #…

1. 构建一个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 depred JSON object      $(".votes-count[data-id=#{data.id}]").text data.count      return

同样，我们使用该

data-id

属性来仅更新受影响的计数器。

在状态之间切换

要将链接从“喜欢”动态更改为“喜欢”，反之亦然，您需要进行以下修改：

1. 修改视图：

        <% 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

）。

1. 还有你的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