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

Question

前提・実現したいこと

プログラミング初学者です。
現在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が原因箇所であるとブラウザの検証ツールから出てきたこともありました。現在では元に戻してあり、上記のエラーメッセージが出ます。

Answer 1

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

Comments

[Pro01x19]

回答ありがとうございます。
create/destroy.js.erbのコードに不備を確認できましたのでコード、投稿を修正してみました。

がエラーメッセージが変わりませんでした。
引き続き文法チェックしていきたいと思います。

[yambejp]

たとえば
$("#like-button-"#"{@post.id}".html(

クォーテーションもへんですし、htmlメソッドを呼ぶための
セレクタ部分のカッコが閉じてませんよね？

[no1knows]

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

[Pro01x19]

@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]

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

[yambejp]

> #{@post.id}

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

[Pro01x19]

情報添付不足　また　勉強不足で申し訳ございません。
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]

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

質問者さんがほんとにidが"like-buttons"であるHTML要素の
HTMLをそうしたいのかはちょっとわかりかねます