Кнопка «Нравится» Ajax в Ruby on Rails

У меня есть проект Ruby on Rails с моделью User и моделью Content, среди прочего. Я хотел дать пользователю возможность «лайкать» контент, и я сделал это с помощью драгоценного камня acts_as_votable.

На данный момент система лайков работает, но я обновляю страницу каждый раз, когда нажимаю кнопку лайка (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

И в моем файле route.rb это то, что у меня есть:

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

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

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


person gd_silva    schedule 14.06.2014    source источник


Ответы (1)


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

Подготовка

  1. Включите Rails UJS и jQuery в свой application.js (если это еще не сделано):

    //= require jquery
    //= require jquery_ujs
    
  2. Добавьте remote: true к своим link_to помощникам:

    <%= link_to "Like", '...', class: 'vote', method: :put, remote: true %>
    
  3. Пусть контроллер ответит без перенаправления на запросы 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
    
person DMKE    schedule 14.06.2014
comment
Привет. Спасибо за ответ. Я сделал именно то, что вы сказали выше (поместил JS в эшафот, созданный contents.js.coffee), но когда я нажимаю на ссылку, номер не обновляется в режиме реального времени. Он просто обновляется после обновления... - person gd_silva; 14.06.2014
comment
Вы //= require content в application.js (или //= require_tree . в этом отношении)? - person DMKE; 14.06.2014
comment
Да, я сделал //= require_tree . - person gd_silva; 14.06.2014
comment
Плохо, в обратном вызове события параметры status и data поменялись местами, я обновлю ответ. - person DMKE; 14.06.2014
comment
Вот оно. Большое спасибо! - person gd_silva; 14.06.2014
comment
Как я могу изменить текст на кнопке (и действие) вместе с номером счетчика? - person gd_silva; 14.06.2014
comment
Что я хочу сделать, так это изменить с «Нравится» на «Не нравится», обновив также вызываемое действие контроллера. Как я могу это сделать? - person gd_silva; 14.06.2014
comment
Это ставится под сомнение в моем вопросе, поэтому, если я создам новый пост, это будет репост. Не могли бы вы отредактировать свой ответ, чтобы помочь мне? - person gd_silva; 15.06.2014
comment
Нашел ошибку. Вы звоните toggle-text вместо toggle_text. То же самое для toggle-href. Кроме того, в конце отсутствует ). - person gd_silva; 16.06.2014
comment
В конце концов, то, что я сказал, неверно. Чего-то не хватает для работы. Обновите свой ответ, и я приму его. - person gd_silva; 16.06.2014
comment
Обнаружил основную проблему: в хелпере link_to отсутствовал remote: true. Конечно, ошибка CoffeeScript также должна была быть исправлена ​​(подробности см. в revisions). - person DMKE; 16.06.2014
comment
Я бы использовал POST вместо PUT. - person vasilakisfil; 28.04.2015