[rails6] いいね機能を非同期通信(ajax)にしたいが処理がリロードしないと反映されない…

前提・実現したいこと

いいね機能を非同期通信(ajax)にしたいです。
リロードすればいいね機能は使えるのですが、非同期通信にはなりません…

一応リロードすれば下記画像のようにいいね機能は作動してはいます。

↓

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

ログにはエラーは出ていないのですが、
デペロッパーツールで処理の確認をしたところ

VM548:1 Uncaught SyntaxError: Unexpected token '<'
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)

というエラーが出ていることに気付きました。

該当のソースコード

app/views/likes/index.js.slim↓

javascript:
    $('#like_btn').html("<%= escape_javascript(render (partial: 'likes/like', locals: {post: @post}))%>")

app/assets/javascripts/application.js↓

//= require jquery3
//= require jquery_ujs
//= require jquery.turbolinks
//= require_tree .
//= require_self
//= require popper
//= require bootstrap-sprockets

app/views/posts/show.html.slim↓

.
.
.
        #like_btn
            = render 'likes/like', post: @post,like: @like
.
.
.

app/views/likes/_like.html.slim↓

- if @post.like?(@post,current_user)
    = link_to post_like_path(post.id,id: post), method: :delete, remote: true do
        i class="far fa-heart unlike-btn"
- else
    = link_to post_likes_path(post.id,id: post), method: :post, remote: true do
        i class="fas fa-heart like-btn"
end

試したこと

いろいろ試した結果、最終的にデペロッパーツールで発見した、
「VM548:1 Uncaught SyntaxError: Unexpected token '<」
というエラーにたどり着いてしまいました。

このエラーの意味を調べてみたら文法やスペルミスなどから出るエラーだとは分かったので、javascriptのコードを修正すれば恐らく解決できるのかな？とは思うのですが、javascriptに関しては超初心者なため正しいコードの書き方がわかりませんでした。泣

上記のコード情報以外に必要な情報があればすぐに対応しますので、先輩方のお力をお借しいただけないでしょうか。
ご教授よろしくお願いいたします。

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

ruby2.6.5
rails 6
vscode
sqlite3（ローカル環境）
ターミナル

退会済みユーザー

2020/03/05 21:22

エラーが発生したコードはそれを含むメソッド単位で上げるべき

mongolia

2020/03/06 01:24

app/views/likes/index.js.slim $('#like_btn').html("<%= escape_javascript(render (partial: 'likes/like', locals: {post: @post}))%>") app/assets/javascripts/application.js↓ 上記で、 console.log("<%= escape_javascript(render (partial: 'likes/like', locals: {post: @post}))%>"); のようにすると、ブラウザー開発者ツールのコンソールに何が出力されますか?

kazuki_0311

2020/03/06 12:18

asahina1979さん、承知しました。修正いたしました。アドバイスありがとうございます！

kazuki_0311

2020/03/06 12:28

mongoliaさん教えていただいたコードでも同じように、デペロッパーツールには下記のエラーログが出ていました。 VM1312:1 Uncaught SyntaxError: Unexpected token '<' at processResponse (rails-ujs.js:283) at rails-ujs.js:196 at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264) あと、もう１つこのようなログもコンソールに出力されていました。↓ on_content_end ==>response to loadPagePattern, href=http://localhost:3000/posts/15, pattern.id=undefined 未定義？

kazuki_0311

2020/03/06 13:09

すみません。ようやく意味がわかりました。（多分） console.logはjavascriptのデバックに使うコードなんですね。いいねボタンを押して、デペロッパーツールのコンソールを開き、そこに使用して何が出力されるか確認するということで合っていますでしょうか？一応試してみたところ、 <%= escape_javascript(render (partial: 'likes/like', locals: {post: @post}))%> が出力されていました。確認方法が間違っていたら教えてください汗