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

У меня есть проект Ruby on Rails с моделью 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? Есть ли другой способ сделать это?

ОТВЕТЫ

Ответ 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 пользователям понравилось". Чтобы архивировать это, выполните следующие действия:

  • Добавьте дескриптор в значение вашего счетчика, чтобы его можно было найти позже с помощью JS:

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

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

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

    #…
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, чтобы обновлять только затронутые счетчики.

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

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

  • Измените свой вид:

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