web-dev-qa-db-ja.com

ボタンAjaxのようにRuby on Rails

Ruby on RailsモデルUserとモデルContentなどのプロジェクトがあります。ユーザーがコンテンツを「いいね」できるようにします。これは acts_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

そして私のroutes.rbファイルでは、これは私が持っているものです：

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

私が言ったように、いいねシステムは正常に機能していますが、ユーザーがそれを押した後、いいねカウンターやいいねボタンを更新しません。代わりに、それをだますために、コントローラーアクションでredirect_to @contentを呼び出します。

簡単なAjax呼び出しでこれを実装するにはどうすればよいですか？それを行う別の方法はありますか？

javascriptruby-on-railsrubyajaxsocial-media-like
13
gd.silva

さまざまな方法でこれを行うことができます。簡単な方法は次のようになります。

準備

  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

    idではなくdata-idの使用にも注意してください。このスニペットが頻繁に使用される場合は、ヘルパーメソッドにリファクタリングします。

  2. コントローラーに、単に「OK」ではなくカウントで応答させます（さらに、ページ上のカウンターを見つけるための情報を追加します。キーは任意です）。

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

  3. AJAXリクエストに反応するJS（CoffeeScriptが好きです）をビルドします：

    # 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
29
DMKE