RailsでAjaxの非同期通信がうまくいきません

Question

前提・実現したいこと

閲覧ありがとうございます。
三ヶ月目の初学者のため、文章など稚拙な部分はご容赦いただければと思います。

Ruby on rails で写真投稿型のアプリを作っています。
モデルはPost,User,Likeの3つです。

投稿の詳細画面(posts/show.html.erb)にいいねボタンを設置し、ajaxで「イイネ」⇄「イイネを取り消す」にしたいのですがうまくいきません。
厳密にはデータは送られているがそのビューで反映してくれない状態です。
(投稿詳細ページ　→　「イイネ」ボタンを押す　→　topに戻る　→　再び投稿詳細ページへ　→　「イイネを取り消す」(イイネ数1)となっていたので、データは送られています。)

下記ソースコードになります。

該当のソースコード

• models/post.rb

class Post < ApplicationRecord
  mount_uploader :image, ImageUploader
  default_scope -> { order(created_at: :desc) }
  belongs_to :user
  has_many :likes
  has_many :liked_users, through: :likes, source: :user
end

• models/user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  has_many :posts, dependent: :destroy
  has_many :likes, dependent: :destroy
  has_many :liked_posts, through: :likes, source: :post  
  def already_liked?(post)
    self.likes.exists?(post_id: post.id)
  end
end

• models.like.rb

class Like < ApplicationRecord
  belongs_to :post
  belongs_to :user
  validates_uniqueness_of :post_id, scope: :user_id
end

• likes_controller.rb

class LikesController < ApplicationController
  
  def create
    @like = current_user.likes.create(post_id: params[:post_id])
  end 
  
  def destroy
    @like = Like.find_by(post_id: params[:post_id], user_id: current_user.id)
    @like.destroy
  end 
  
end

• posts_controller.rb

class PostsController < ApplicationController

 def show
  @post = Post.find(params[:id])
 end

end

• posts/show.html.erb

<div class="detail">
  <%= image_tag @post.image.url, :size =>'480x480' %>
  <%= simple_format(@post.text) %>
  <div id="likes_buttons_<%= @post.id %>">
    <%= render partial: 'likes/like', locals: { post: @post } %>
  </div>
  <div class="like_count">
    <%= @post.likes.count %>
  </div>
  <div class="liked_user">
    <li>イイネしたユーザー</li>
    <% @post.liked_users.each do |user| %>
      <li><%= user.nickname %></li>
    <% end %>
  </div>
</div>

• likes/_like.html.erb

<% if current_user.already_liked?(post) %>
  <%= button_to 'イイネを取り消す', post_like_path(post), method: :delete, remote: true %>
<% else %>
  <%= button_to 'イイネ', post_likes_path(post), method: :post, remote: true %>
<% end %>

• likes/create.js.erb

$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

• likes/destroy.js.erb

$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

コードが多く申し訳ありません、、、

試したこと/補足

• 恥ずかしながらajaxを完璧に理解できておらず、どの変数が何を指しているのか混乱しています。

_like.html.erbのpostを@postに変えてみたりしましたがなかなかうまく動きません。

• ユーザーがalready_likedかどうかは判断できているようです。

データは送られているが、非同期で反映してくれない状態？(create.jsやdestroy.jsが原因のような気がします)

その他補足情報

OS : mac
環境 : cloud9
データベース : mysql
ruby バージョン : ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
rails バージョン : 5.2.3

Answer 1

$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

@postを使っているようですがその@postがコントローラで用意されていません。
逆に@likeはどこで使うために用意されたのでしょうか。

sample

def create
  @post = Post.find(params[:post_id])
  current_user.likes.create!(post_id: @post.id)
end 

def destroy
  @post = Post.find(params[:post_id])
  current_user.likes.find_by(post_id: @post.id).destroy!
end

Comments

[yuki1221]

早速の回答ありがとうございます。
確かにおっしゃる通り全く使わない変数を定義していました...

修正したところ「イイネを取り消す」→「イイネ」(destroy)は問題なく非同期で遷移するようになったのですが、
「イイネ」→「イイネを取り消す」(create)がやはり再読み込みしないと反映されません。

今自分でも色々修正してみてるのですが、
他に何か原因など考えられますでしょうか？

[rhiroe]

ログに何かエラーなどは出てないですか？
デバッグを仕込んでみるとかやれることはたくさんあります。

[yuki1221]

返信遅れまして申し訳ありません。
createの直前とdestroyの直前にbinding.pryでparamsを取得してみました。

[2] pry(#<LikesController>)> params
=> <ActionController::Parameters {"authenticity_token"=>"1f2/KjE8dJb3MPGXEFoTaXQ0quNZgW3RZP+1RQsHzYNrT0Tx9koK15K+bL7OsfxgFxiv70HYmF/w85EYD6Y9Pw==", "controller"=>"likes", "action"=>"create", "post_id"=>"10"} permitted: false>

[1] pry(#<LikesController>)> params
=> <ActionController::Parameters {"_method"=>"delete", "authenticity_token"=>"C2VtcC7qwLGYvdjfou6QyFM14pt9FAW1FvyGlBMe3jU6d5F74y77XQej2dl3hIpUskgAxhtSI3Q5pD6Qgooqdg==", "controller"=>"likes", "action"=>"destroy", "post_id"=>"10", "id"=>"10"} permitted: false>

permitted: falseとなっているのが原因でしょうか...
ストロングパラメーターなどで取得しようと試みましたが、うまくいきません。
お手数おかけします...