Кнопка Like Ajax в Ruby on Rails

Question

У меня есть проект Ruby on Rails с моделью User и модель Content среди других. Я хотел, чтобы пользователь " лайкнул " контент, и я сделал это с помощью act_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

И в моем файле rout.rb вот что я имею:

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

Как я уже сказал, система симпатий работает нормально, но не обновляет ни счетчик лайков, ни кнопку "лайк" после того, как пользователь ее нажмет. Вместо этого, чтобы обмануть это, я звоню redirect_to @content в действии контроллера.

Как я могу реализовать это с помощью простого вызова Ajax? Есть ли другой способ сделать это?

Answer 1

Вы можете сделать это различными способами, простой путь выглядит так:

Препараты

0. Включите в свой 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 class="votes-count" data-id="<%= @content.id %>">
     <%= @content.get_likes.size %>
   </span>
   users like this
   

   Обратите также внимание на использование data-idне id, Если этот фрагмент часто используется, я бы преобразовал его в вспомогательный метод.

2. Пусть контроллер ответит счетчиком, а не просто "ОК" (плюс добавьте некоторую информацию, чтобы найти счетчик на странице; ключи произвольные):

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

3. Создайте 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 атрибут, чтобы обновить только затронутые счетчики.

Переключение между состояниями

Чтобы динамически изменить ссылку с "нравится" на "не нравится" и наоборот, вам понадобятся следующие модификации:

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).

2. И ваш 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