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

у меня есть проект Ruby on Rails с моделью User модель Content, среди других. Я хотел, чтобы пользователь мог "любить" контент, и я сделал это с помощью acts_as_votable камень.

на данный момент система симпатии работает, но я обновляю страницу каждый раз, когда нажимается кнопка like (link_to).

Я хотел бы сделать это с помощью Ajax, чтобы обновить кнопку и счетчик лайков без необходимости обновления страница.

в своем Content -> Show view, это то, что у меня есть:

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

The 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

и в моих маршрутах.RB файл, вот что у меня есть:

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

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

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

12
ajax javascript ruby ruby-on-rails social-media-like

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
28