Comme le bouton Ajax dans Ruby on Rails

J'ai un Rubis sur des Rails de projet avec un modèle User et un modèle Contententre autres. Je voulais le rendre possible pour un utilisateur de "like" d'un contenu, et je l'ai fait avec le acts_as_votable gem.

Pour le moment, le goût système fonctionne, mais je suis de l'actualisation de la page chaque fois que le bouton "like" (link_to) est pressé.

J'aimerais le faire à l'aide d'Ajax, afin de mettre à jour le bouton et l'aime compteur sans avoir besoin de rafraîchir la page.

Dans mon Content -> Show vue, c'est ce que j'ai:

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

La Content contrôleur de cela pour aime/aime pas:

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

Et dans mes itinéraires.rb fichier, c'est ce que j'ai:

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

Comme je l'ai dit, le goût système fonctionne très bien, mais ne met pas à jour l'aime comptoir, ni le bouton "like", après qu'un utilisateur appuie sur elle. Au lieu de cela, de truc qui, je l'appelle redirect_to @content dans l'action du controller.

Comment pourrais-je mettre en œuvre des ce avec un simple appel Ajax? Est-il une autre façon de le faire?

source d'informationauteur gd.silva

  1. 28

    Vous pouvez le faire de diverses manières, de la manière la plus simple qui va comme ceci:

    Préparations

    1. Inclure des Rails UJS et jQuery dans vos application.js (si ce n'est déjà fait):

      //= require jquery
//= require jquery_ujs

    2. Ajouter remote: true à votre link_to aides:

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

    3. Laisser le contrôleur de répondre par un non-rediriger sur des requêtes AJAX:

      def like
  @content = Content.find(params[:id])
  @content.liked_by current_user

  if request.xhr?
    head :ok
  else
    redirect_to @content
  end
end

    Avancé comportement

    Vous voulez probablement mettre à jour le "n utilisateurs aimé cet affichage". Pour obtenir cela, suivez ces étapes:

    1. Ajouter une poignée à votre valeur de compteur, de sorte que vous pouvez le retrouver plus tard avec JS:

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

      Veuillez également noter l'utilisation de la data-idpas id. Si cet extrait est utilisé souvent, j'avais refactoriser le code dans une méthode d'aide.

    2. Laisser le contrôleur de réponse avec le comte et pas simplement un "OK" (en plus d'ajouter quelques informations afin de trouver le compteur sur la page; les touches sont arbitraires):

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

    3. Construire un JS (je préfère CoffeeScript) à réagir sur la requête 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

      Encore une fois, nous sommes à l'aide de la data-id attribut, afin de mettre à jour uniquement les compteurs affectés.

    Basculer entre les états

    Pour modifier dynamiquement le lien de "j'aime" pour "n'aime pas" et vice versa, vous avez besoin de ces modifications:

    1. Modifier votre point de vue:

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

      De nouveau: Ce qui devrait aller dans une méthode d'assistance (par exemple,vote_link current_user, @content).

    2. Et votre 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