Ajaxでいいね!値の更新がされない。

Question

###前提・実現したいこと

現在、Ajax無しではredirect_toで処理でいいね!処理をしている状態です。そこでAjaxと取り入れ、ページの更新無しに部分更新をしたく存じます。
https://qiita.com/naberina/items/c6b5c8d7756cb882fb20を参考に作っています。

しかし、いいね！ボタンを押すと、反応はなく、ページ更新すると反映されます。
ログを確認すると、jsファイルへpostの値をうまく渡せずにエラーを起こしています。

###エラー

*いいね!create時
Started POST "/likes/3/create" for 127.0.0.1 at 2019-06-14 14:53:51 +0900
Processing by LikesController#create as JS
  Parameters: {"post_id"=>"3"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/application_controller.rb:6
  Post Load (0.2ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."id" IS NULL LIMIT ?  [["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:7
   (0.1ms)  begin transaction
  ↳ app/controllers/likes_controller.rb:9
  CACHE User Load (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:9
  Post Load (0.3ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."id" = ? LIMIT ?  [["id", 3], ["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:9
  Like Create (0.5ms)  INSERT INTO "likes" ("user_id", "post_id", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["user_id", 1], ["post_id", 3], ["created_at", "2019-06-14 05:53:51.570765"], ["updated_at", "2019-06-14 05:53:51.570765"]]
  ↳ app/controllers/likes_controller.rb:9
   (1.0ms)  commit transaction
  ↳ app/controllers/likes_controller.rb:9
  Rendering likes/create.js.erb
  Rendered likes/create.js.erb (18.0ms)
Completed 500 Internal Server Error in 112ms (ActiveRecord: 2.2ms)


  
ActionView::Template::Error (undefined method `id' for nil:NilClass):
    1: $('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");
  
app/views/likes/create.js.erb:1:in `_app_views_likes_create_js_erb___1624215930080801267_70224208720440'

*いいね!destroy時
Started POST "/likes/3/destroy" for 127.0.0.1 at 2019-06-14 14:46:30 +0900
Processing by LikesController#destroy as JS
  Parameters: {"post_id"=>"3"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/application_controller.rb:6
  Post Load (0.2ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."id" IS NULL LIMIT ?  [["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:15
  Like Load (0.2ms)  SELECT  "likes".* FROM "likes" WHERE "likes"."user_id" = ? AND "likes"."post_id" = ? LIMIT ?  [["user_id", 1], ["post_id", 3], ["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:16
   (0.1ms)  begin transaction
  ↳ app/controllers/likes_controller.rb:17
  Like Destroy (0.4ms)  DELETE FROM "likes" WHERE "likes"."id" = ?  [["id", 27]]
  ↳ app/controllers/likes_controller.rb:17
   (1.0ms)  commit transaction
  ↳ app/controllers/likes_controller.rb:17
  Rendering likes/destroy.js.erb
  Rendered likes/destroy.js.erb (22.8ms)
Completed 500 Internal Server Error in 116ms (ActiveRecord: 2.0ms)


  
ActionView::Template::Error (undefined method `id' for nil:NilClass):
    1: $('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");
  
app/views/likes/destroy.js.erb:1:in `_app_views_likes_destroy_js_erb__3123402465132948964_70224203960620'

ちなみに、@post→postに変更した場合、ActionViewはこのような記載になります。

*いいね！create時
ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x00007fbcb1769a60>:0x00007fbcad37bd30>
Did you mean?  @post
               @posts):
    1: $('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>");
*いいね！destroy時
ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x00007fbcb1769a60>:0x00007fbcb16a9cd8>
Did you mean?  @post
               @posts):
    1: $('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>");

###コード

<% @posts.each do |post| %>
<div id='likes_buttons_<%= post.id %>'>
    <%= render partial: 'likes/like', locals: { post: post} %>
    </div>
<% end %>

*_like.html.erb
      <% if Like.find_by(user_id: @current_user.id, post_id: post.id) %>
        <%= link_to("/likes/#{post.id}/destroy", method: :post, remote: true) do %>
          <span class="fa fa-heart icon-size like-btn-unlike"></span>
          <% end %>
      <% else %>
        <%= link_to("/likes/#{post.id}/create", method: :post, remote: true) do %>
        <span class="fa fa-heart icon-size like-btn"></span>
        <% end %>
      <% end %>
      <%= Like.where(post_id: post).count %>

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

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

*application.js
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require activestorage
//= require turbolinks
//= require_tree .

class LikesController < ApplicationController
  before_action :authenticate_user
  
  def create
    @posts = Post.all.order(created_at: :desc)
    @post = Post.find_by(id: params[:id])
    @like = Like.new(user_id: @current_user.id, post_id: params[:post_id])
    @like.save
  end
  def destroy
    @posts = Post.all.order(created_at: :desc)
    @post = Post.find_by(id: params[:id])
    @like = Like.find_by(user_id: @current_user.id, post_id: params[:post_id])
    @like.destroy
  end
end

Comments

[hatsu]

likes_controller.rb？のようないいねを動作しているコントローラー（LIkeクラスのCreateメソッドとか）があれば見せていただけると参考になりそうです...！

[tomtom1]

ありがとうございます！追記致しましたので、ご確認頂ければ幸いです！

Answer 1

LikesControllerのCreateメソッドではおそらく

• @like.saveでlikeを保存すること
• $('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");で必要な@postという変数を返すこと

をする必要があると思います。
で、エラー内容を見ると@postが無いと言われています。そこで、@postを返すために以下のようにするといかがでしょうか？

def create
  @like = Like.new(user_id: @current_user.id, post_id: params[:post_id])
  @like.save
  @post = @like.post
end

Comments

[tomtom1]

随分と返信に時間が経ってしまいました！申し訳ありません。当時全然理解していなかったのですが、現在に至り本件を理解し解決できました！@post = @like.postつけてエラー解決です。ありがとうございます！

[hatsu]

よかったです????