非同期通信　Uncaught SyntaxError: Invalid or unexpected tokenを解決したい　該当箇所VM364:1

前提・実現したいこと

プログラミング初学者です。
現在SNSのいいね機能を追加実装中なのですが、非同期通信が上手くいきません。
ボタンを押すと色が変わり、横についている数字が変動する仕組みを作りたいです。
現状はボタンを押しても反応がなく、画面を更新すると反映され、ターミナルにもエラーメッセージは出ません。

検証ツールで確かめてみると

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

Uncaught SyntaxError: missing ) after argument list
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)

processResponse	@	rails-ujs.js:283
(anonymous)	@	rails-ujs.js:196
xhr.onreadystatechange	@	rails-ujs.js:264
XMLHttpRequest.send (async)		
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.ajax	@	rails-ujs.js:216
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.handleRemote	@	rails-ujs.js:652
(anonymous)　	@	rails-ujs.js:172

と出ています

ネットワークのプレビューでは

$("#like-button-"#"{@post.id}".html("          <form class=\"button_to\" method=\"post\" action=\"/posts/2/likes/28\" data-remote=\"true\"><input type=\"hidden\" name=\"_method\" value=\"delete\" /><button id=\"like-button-2\" type=\"submit\">\n          <i class=\"fas fa-star\"></i>\n            <span>\n              0\n            </span>\n</button><input type=\"hidden\" name=\"authenticity_token\" value=\"1SJBOyJwncD08d8e5yit90PgqwuruDjsECWP/NeFxr0lKfcxH850F5z5hcgYTg50bOATZh1Fxj7Bs3E9fvGxzw==\" /></form>")

となっていました。

該当のソースコード

likes_controller

 before_action :set_post

  def create
    @like = Like.create(user_id: current_user.id, post_id: params[:post_id])
    @likes = Like.where(post_id: params[:post_id])
    @posts = Post.all
  end

  def destroy
    like = Like.find_by(user_id: current_user.id, post_id: params[:post_id])
    like.destroy
    @likes = Like.where(post_id: params[:post_id])
    @posts = Post.all
  end

  private

  def set_post
    @post = Post.find(params[:post_id])
  end
end

_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:"likes/like", locals: { posts: @posts, likes: @likes, like: @like, post: @post}) %>");

試したこと

エラー文の読み方から分からなかったのでGoogleで調べ、誤字、脱字などが原因である可能性が高いことを知り、目視で確認し、rubocopにも通してみました。

補足情報（FW/ツールのバージョンなど）

https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2

こちらの方の記事を参考に実装を進めています。

途中コードを少し書き換えて確かめていたところステータス５００やlocalhostが原因箇所であるとブラウザの検証ツールから出てきたこともありました。現在では元に戻してあり、上記のエラーメッセージが出ます。

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

回答1件

ベストアンサー

ご指摘の箇所は文法エラーのようなので、カッコのつけわすれとか
基本的なところをチェックするところから始めてください

投稿2020/12/10 07:33

yambejp

総合スコア116724

Pro01x19

2020/12/10 07:42

回答ありがとうございます。 create/destroy.js.erbのコードに不備を確認できましたのでコード、投稿を修正してみました。がエラーメッセージが変わりませんでした。引き続き文法チェックしていきたいと思います。

yambejp

2020/12/10 07:46

たとえば $("#like-button-"#"{@post.id}".html( クォーテーションもへんですし、htmlメソッドを呼ぶためのセレクタ部分のカッコが閉じてませんよね？

no1knows

2020/12/10 07:47

エラーメッセージが変わらないというのはすこし変な気がしますね。一度、アプリを再起動して、確認してみてはいかがでしょうか？

Pro01x19

2020/12/10 08:02

@yambejp さんご指摘いただいた箇所かは分かりませんが $("#like-button")-#{@post.id}.html("<%= j(render partial:"likes/like", locals: { posts: @posts, likes: @likes, like: @like, post: @post}) %>"); このようなコードに修正してみました Uncaught SyntaxError: Invalid or unexpected token とエラーメッセージが変わりました。

Pro01x19

2020/12/10 08:07

@no1knows　さん再び書き直したらメッセージが変わりました！

yambejp

2020/12/10 08:11

> #{@post.id} ルビーが個の記述から何を返すかわかりませんが $('#hoge').html('<なんたらかんたら>'); にならない限りjsで制御はできないですね

Pro01x19

2020/12/10 21:40 編集

情報添付不足　また　勉強不足で申し訳ございません。 Rubyの記述をすぐに記載します。 $("#like-button").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes }) %>"); のような記述が好ましいと行った形でしょうか？ POST http://localhost:3000/posts/2/likes 500 (Internal Server Error) のようなエラーになり、進んでいるか分からない状態です。

yambejp

2020/12/10 08:41

質問者さんと同じ環境ではないのでなんとも言えませんがセレクタに対してhtmlメソッドでhtml要素を変更できるののが jQueryの機能の一つです、サーバーサイド(ruby)側ではクライアントが実行できる形で値を渡してやる必要があります質問者さんがほんとにidが"like-buttons"であるHTML要素の HTMLをそうしたいのかはちょっとわかりかねます

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