いいね機能を非同期で実行

Question

投稿にいいね！ができる機能がついていますが、クリックする度にサイドサーバーがから読み込まれる状況ですが、それを非同期でページの更新をなくしたいです。（FBやインスタグラムのように）

<% @posts.each do |post| %>
  <h4><%= link_to(post.title, "/posts/#{post.id}") %></h4>
    <% if Like.find_by(user_id: @current_user.id, post_id: post.id) %>
      <%= link_to("/likes/#{post.id}/destroy", {method: "post"}) do %>
          <span class="fa fa-heart like-btn-unlike"></span>
          <% end %>
    <% else %>
      <%= link_to("/likes/#{post.id}/create", {method: "post"}) do %>
          <span class="fa fa-heart like-btn"></span>
          <% end %>
    <% end %>

class LikesController < ApplicationController

  def create
    @like = Like.new(user_id: @current_user.id, post_id: params[:post_id])
    @like.save
    redirect_to("/posts/#{params[:post_id]}")
  end
  def destroy
    @like = Like.find_by(user_id: @current_user.id, post_id: params[:post_id])
    @like.destroy
    redirect_to("/posts/#{params[:post_id]}")
  end
end

class Post < ApplicationRecord
 has_many :likes, dependent: :delete_all
class Like < ApplicationRecord
 belongs_to :post

おそらく、次のステップは非同期で行うために、link_toのオプションにremote: trueを入れて、リンクを押した時にajaxが発生する流れになるかと思いますが、調べても調べても把握できずにいます。
お力添えを頂ければ幸いです。

Comments

[m.ts10806]

実際にremote:trueを入れて動作させたのでしょうか。（Rails詳しくはないのですがリファレンスで確認した限りそれだけでAjax通信しそうですが）もう少し「何が分からないか」を具体的に記載された方が回答が得やすくなると思います。Ajax通信させて「いいね」数更新したら、その時点での「いいね」数を取得してAjaxのレスポンスとして返し、画面表示を（JavaScriptで）書き換える・・というところはRails限らず同じだと思うので、「今どの段階か」という記載は欲しいですね。

[tomtom1]

コメントありがとうございます！現段階としては、まずはremote: trueを入れて行けばいいのか..と把握している程度で、記述した内容からは進んでいません。現在、Controller内に記載があるように、saveあるいはdestroyをするとredirect_toの処理になっています。その場合、ページを更新してしまいます。そうではなく、非同期でクリックしたらページの移動或いは上位ページに戻る処理ではなく、その場所のままPOST処理を実行したいです。説明不十分で申し訳ありません。

Answer 1

Railstutorial に取り組んだことはありますでしょうか？
いいね機能ではないですがフォローを非同期処理で行う方法が説明されています。
これを参考にしながらするといいのではないでしょうか？
Ruby on Rails チュートリアル 14.2.5 [Follow] ボタン (Ajax編)

Comments

[tomtom1]

ご回答ありがとうございます。大変参考になりました。
いきなりいいね！の実装ではなく、参考通りフォローに対してできるかを検証しました。

実際に取り入れてみたところ、非同期でフォローとフォロー解除ができるようになりました。
しかし、手動の更新無くして、フォローボタンとフォロー数に変化を与えることはできませんでした。
html:
<p> フォロワー <%= @follower_count %>&nbsp;&nbsp;フォロー中 <%= @followed_count %></p>
<% if @current_user != @user %>
<% if @current_user.following?(@user) %>
<%= button_to "フォロー中", friendship_path(user_id: @user.id), method: :delete, :remote=>true, :class => "follow-btn" %>
<% else %>
<%= button_to "フォローする", friendships_path(user_id: @user.id), method: :post, :remote=>true, :class => "follow-btn" %>
<% end %>
<% end %>

create.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#follower_count").html("<%= @follower_count %>");
$("#followers").html('<%= button_to "フォローする", friendships_path(user_id: @user.id), method: :post, :remote=>true, :class => "follow-btn" %>');

Destroy.js.erbもcreateと同じようなものでなので割愛しますが、
2列目と3列目の書き方はおかしいでしょうか？
サイトの14.38を見る限り、このような書き方であると言う認識を持ちました。

[退会済みユーザー]

js.erbで表示を書き替えているはずですが
id='follow_form'のdivタグやその他のdivタグも用意されてますか？
コメントで見える範囲には書かれてないようですが...
ajaxの部分だけでなく前後の説明も少し確認してみるといいかもしれませんね。

[tomtom1]

お付き合いありがとうございます。
$("#follow_form")にはそのような意味があったのですね。前後を読んで理解しました。
改めて多少修正も加えて、idも加えたのですがやはり結果は同じになってしまいました。

html:
<strong id="following">
<p> フォロワー <%= @follower_count %></strong>
<strong id="followers">
フォロー中 <%= @followed_count %></strong></p>
<% if @current_user != @user %>
<div id="follow_form">
<% if @current_user.following?(@user) %>
<storng id="follower_btn">
<%= render 'unfollow' %>
<% else %>
<%= render 'follow' %>
</storng>
<% end %>
</div>
<% end %>

_follow.js.erb　：
<%= button_to "フォローする", friendships_path(user_id: @user.id), method: :post, :remote=>true, :class => "follow-btn" %>
_unfollow.js.erb　：
<%= button_to "フォロー中", friendship_path(user_id: @user.id), method: :delete, :remote=>true, :class => "follow-btn" %>

create.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html("<%= @follower_count %>");
$("#follower_btn").html('<%= button_to "フォローする", friendships_path(user_id: @user.id), method: :post, :remote=>true, :class => "follow-btn" %>');
恐れ入りますがご指摘頂ければ幸いです。

[tomtom1]

また、Friendship Controllerは以下のようになります。
def create
@current_user.follow(@user)
respond_to do |format|
format.html { redirect_to @user }
format.js
end
一行目のフォローのみ実行され、2行目のrespondの反応が見れずにいます。
現に一行目を削除しましたら、ボタンをフォローボタンをクリックして手動でページ更新しても
フォローされていないです。

また確認ですが、/views/friendships内にcreate.js.erbとdestroy.js.erbファイルを保存しているのですが、保存先は正しいでしょうか。