非同期通信がしたい　Uncaught Error: Syntax error, unrecognized expression: #like-button-#{@post.id}

前提・実現したいこと

プログラミング２ヶ月目の初学者です、色々至らぬ点があるとは思いますが、成長意欲はあるつもりですのでどうか学習のヒントだけでも教えてください。

現在、railsでSNS風のアプリを作成中で、いいね機能を実装しようとしています。
ボタンを押すと色が変わり、ボタンの横の数字が変動する。ようなものをイメージしており、
同期通信の状態（リロードをする）と上手く行っております。

検証ツールで中身を見ると

発生している問題・エラーメッセージ

Uncaught Error: Syntax error, unrecognized expression: #like-button-#{@post.id}
    at Function.se.error (jquery-3.4.1.min.js:2)
    at se.tokenize (jquery-3.4.1.min.js:2)
    at se.select (jquery-3.4.1.min.js:2)
    at Function.se [as find] (jquery-3.4.1.min.js:2)
    at k.fn.init.find (jquery-3.4.1.min.js:2)
    at new k.fn.init (jquery-3.4.1.min.js:2)
    at k (jquery-3.4.1.min.js:2)
    at <anonymous>:1:1
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196

と出ており、Googleの検索にかけても解決策が見出せず現在に至ります。

該当のソースコード

Gem
1
2gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
3
4gem 'pry-rails'
5
6gem 'devise'
7
8gem 'mini_magick'
9gem 'image_processing', '~> 1.2'
10
11gem 'font-awesome-sass'
12
13gem 'jquery-rails'
14
15gem 'jquery-turbolinks'
16

application.js

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('turbolinks')
require("bootstrap")

import 'bootstrap';
import '../stylesheets/application';

_like.html.erb
<% if user_signed_in? %>
        <% if post.like_user(current_user.id) %>
          <%= button_to post_like_path(like, post_id: post.id), method: :delete, id: "like-button-#{post.id}", remote: true do %>
          <i class="fas fa-star"></i>
            <span>
              <%= post.likes_count %>
            </span>
           <% end %>
        <% else %>
        
        <%= button_to post_likes_path(post), id: "like-button-#{post.id}", remote: true do %>
        <i class="far fa-star"></i>
          <span>
            <%= post.likes_count %>
          </span>
          <% end %>
        <% end %>
      <% else %>
      <i class="far fa-star"></i>
          <span>
            <%= post.likes_count %>
          </span>
<% end %>

create.js.erb / destroy.js.erb

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

その他、問題がありそうな箇所ありましたら教えていただけると幸いです。

plasticgrammer

2020/12/10 04:55

gemfileを編集した後に、bundle install もしくは update は行っているのでしょうか。参考） https://qiita.com/ngron/items/95846bd630a723e00038 https://qiita.com/KazuhoE/items/f68b261e9279c1fa9f64

Pro01x19

2020/12/10 05:27

質問ありがとうございます。 gemfileを編集後はbundle installを行い、サーバーも再起動しております。参考記事の添付非常に助かります！

Pro01x19

2020/12/10 05:35

参考記事の特に2つ目を参照し、application.jsにまだ入っていない記述を足し再度挑戦してみましたが結果が変わらない状態にあります...

plasticgrammer

2020/12/10 05:46

https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a 上記記事は参考になるでしょうか。詳細は理解できていませんが、「jquery3」でも同じ結果でしょうか。 require('jquery3')

Pro01x19

2020/12/10 05:51

詳細をお伝えできていなくて申し訳ございません。現在、bootstrapはCDNでCSSフレームワークとして利用できている状態です。それ以外でbootstrapをインストールしてしまっても問題はないのでしょうか？

Pro01x19

2020/12/10 05:52

juquery3に変更してみましたが症状変わりませんでした...

FKM

2020/12/10 06:05

使用しているRailsのバージョンを教えて下さい。6以上はデフォルトでjQueryが入っていないため、設定する必要があります。

Pro01x19

2020/12/10 06:11

質問ありがとうございます。また、情報添付不足で申し訳ございませんでした、現状Rails 6.0.3.4で実装しております。

Pro01x19

2020/12/10 06:16

6以上でもJQueryをインストールする方法 https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13 こちらを参考にJQueryを設定しました。 jquery-3.4.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #like-button-#{@post.id} というエラーに発展しました... 質問内容を修正したいと思います

行動規範の内容に同意します

回答2件

ここのサイトを参考にした可能性が高いですが、上記の方法はあくまでスクリプトの中身の場合で、文字列の場合はto_jsonによるオブジェクト化が必要なのではないでしょうか。

html.erbファイルでjs直書きでその中にrubyのコードを埋め込んでいる状態のものをslimに置き換えるときの書き方

投稿2020/12/10 06:29

FKM

総合スコア3644

Pro01x19

2020/12/10 06:35

回答いただきありがとうございます。勉強不足で申し訳ございません。 js.erbで行っているのはボタンの色の変動、カウントの変動のつもりで行っているのですが、しっかりとしたjsファイルを書く必要があるのでしょうか？ https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2 こちらの記事を参考に実装を進めさせていただいております