Rails いいねカウントのAjax実装

Question

何卒ご助力のほど宜しくお願い致します。

達成したいこと

いいねボタンを押すと、リロードせず、いいね回数が増える。

環境

• Rails 5.2.4.2
• ruby 2.6.3

現状

• リロードすれば、いいね回数が増える。(ということは、jsonの書き方が悪いのか・・・)
• いいね関係については「like」としている。

関係コード

• コントローラー(likes_controller.rb)

class LikesController < ApplicationController

  def create
    @like = Like.create(message_id: params[:message_id])
    @likes = Like.where(message_id: params[:message_id])
  end

end

• モデル(like.rb)

class Like < ApplicationRecord
  belongs_to :message, counter_cache: :likes_count
end

• ビュー

.contents
  .a-content
    - @messages.each do |message|
      .a-text
      = message.text
      .a-push
      = render partial: 'likes/like', locals: { message: message, likes: @likes }
      .a-count
      = message.likes_count

• 部分テンプレート(_like.html.haml)

= button_to message_likes_path(message),id: "like-buttons", remote: true do
  %i.fas.heart

• jsファイル(create.js.haml)

$("#like-buttons").html("#{j(render partial: 'like', locals: { message: message, likes: @likes, like: @like})}");

必要な情報等ございましたら、ご教授願います。
何卒よろしくお願い致します。

Comments

[satoshih]

ブラウザ上でのcreate.jsの内容はどうなっていますでしょうか？
ブラウザの開発者ツールで確認できるかと思います。

[raigakun]

お手数ですが、以下ご覧いただけますでしょうか。
[](https://gyazo.com/dda6971fc438b4439c58fec157aede1c)

いいねボタンを押すたびに、エラー回数は増えていきます。

Answer 1

$("#like-buttons").html() ということは
<button id="like-buttons">回数</button>全体をそうとっかえする
という作戦ですね？
JSは不得意なのでうまく言語化できませんが、なんか違和感があります。
$("#like-buttons").text() にして、回数だけ置き換えるのではどうでしょう

Comments

[raigakun]

@winterboum　様

ご教授頂き、ありがとうございます！
やはり機能しないです。

難しいです。

[winterboum]

log 見ましたか？

[raigakun]

以下Gyazoを添付させて頂きました。

[raigakun]

お手数ですが、ご覧頂けますと幸いです。

[](https://gyazo.com/2b4a2fc3c8eae3a5ca6c375b29aea43e)

[winterboum]

なぜそういうのを画像貼り付けの人が多いのだろう。
一番下にエラーでてますね

[raigakun]

ご助言ありがとうございます。
エラーに対するご助言頂けますと幸いです。

[raigakun]

binding.pryで確認し、調べてみます。
もし宜しければ、ご教授頂けますと幸いです。

[winterboum]

こういうときコピペできないんで、画像は嫌なんです
message　が未定義です。　@message とでもして、controllerで定義してください

[raigakun]

コピペできないと不便です・・・（私も学習しました！）
ちなみに解決できました！
過去記事を参考に実装致しましたところ、Ajaxききました。
https://teratail.com/questions/88802?link=qa_related_pc

ありがとうござました！