[Rails] ajaxでLike機能を実装したが、リロードしないと反映されない

Question

###前提・実現したいこと
ajaxによるLike機能を実装したいと考えています。

下記の参考エントリに基づきコードを書いたのですが、Likeボタンをクリックしても反応がありません。
コンソールに下記のエラーが出ていました。

Completed 500 Internal Server Error in 673ms (ActiveRecord: 29.7ms)

ActionView::Template::Error (undefined local variable or method `plan' for #<#<Class:0x007fd3f5972d88>:0x007fd3f5965e30>
Did you mean?  plans):
    4:     |  
    5:     = plan.likes_count
    6:     br
    7: - elsif plan.like_user(current_user.id)
    8:   = button_to plan_like_path([likes, like], plan_id: plan.id), method: :delete, id: "like-button", remote: true do
    9:     span.heart
   10:       = image_tag("icon_red_heart.svg")

ところが、リロードするとLikeが増減しています。

Likeボタンを押すことで、ページ遷移無しでLikeが増減するようにしたいと思っています。

###参考にしたエントリー
http://qiita.com/YuitoSato/items/94913d6a349a530b2ea2
http://qiita.com/yukisaibai/items/0a84e8c02f423faa7891

###likes_controller.rb

class LikesController < ApplicationController
  
  before_action :set_likes
  before_action :authenticate_user!

  def create
    @like = Like.create(user_id: current_user.id, plan_id: params[:plan_id])
  end

  def destroy
    like = Like.find_by(user_id: current_user.id, plan_id: params[:plan_id])
    like.destroy
  end
  
  private
    def set_likes
      @likes = Like.where(plan_id: params[:plan_id])
    end
end

###/view/likes/_like.html.slim

- if current_user.nil?
  span.heart
    = image_tag("icon_red_heart.svg")
    |  
    = plan.likes_count
    br
- elsif plan.like_user(current_user.id)
  = button_to plan_like_path([likes, like], plan_id: plan.id), method: :delete, id: "like-button", remote: true do
    span.heart
      = image_tag("icon_red_heart.svg")
    |  
    = plan.likes_count
    br
- else
  = button_to plan_likes_path(plan), id: "like-button", remote: true do
    span.heart
      = image_tag("icon_heart.svg")
    |  
    = plan.likes_count
    br

###/view/likes/create.js.slim

| $("#like-button").html("
= j(render partial: 'like', locals: { plans: @plans, likes: @likes, like: @like })
| ");

###/view/likes/destroy.js.slim

| $("#like-button").html("
= j(render partial: 'like', locals: { plans: @plans, likes: @likes })
| ");

###補足情報
本番環境
・さくらVPS
・ubuntu 16.04
・nginx 1.10.3-0
・unicorn 4.9.0-2build2
・ruby 2.4.1p111 (2017-03-22 revision58053) [x86_64-darwin16]
・Rails 5.0.3

開発環境
・cloud9

Answer 1

モデルのコードを見せていただくことってできますか？

Comments

[japomondo]

class Room < ApplicationRecord
has_many :likes, dependent: :destroy

def like_user(user_id) # like拡張機能
likes.find_by(user_id: user_id)
end
end

[japomondo]

コメントありがとうございます。↑がRoomのモデルです。

Answer 2

正しい回答になってはいませんがcreateの中に一度binding.pryは仕掛けてみましたか？

def create
    binding.pry
    @like = Like.create(user_id: current_user.id, room_id: params[:room_id])
    @likes = Like.where(room_id: params[:room_id])
  end

↑のようにしてみてまずはエラーが出ているところを絞ってみるのはどうでしょうか

Comments

[japomondo]

アドバイスありがとうございます。早速やってみました。↓のコードが原因というのは分かりました。
@like = Like.create(user_id: current_user.id, room_id: params[:room_id])

↓のエラー文を考えてみて、Stringオブジェクトを入れないといけないのにFixnumオブジェクトを入れようとしていることが原因なのだろうなと思うのですが。
TypeError (no implicit conversion of Fixnum into String):

user_idもroom_idもinteger型だよなぁ、と。

[hnts]

```Like.create(user_id: current_user.id, room_id: 適当な数字)```はエラー起きますか？

[japomondo]

はい、同様のエラーが起きました。

[hnts]

Like.create(user_id: "1", room_id:"1")
Like.create(user_id: 1, room_id:1)
Like.create(user_id: "1", room_id:1)
Like.create(user_id: 1, room_id:"1")

コンソールでやると上記の4つはどうですか？

[japomondo]

ご返信ありがとうございます。

すべて同じエラーが出ました。
TypeError: no implicit conversion of Fixnum into String

[hnts]

コールバックとかしてます？

[japomondo]

コメントありがとうございます。Roomクラスに関してはしていないです。