いいね機能の非同期通信を実装したいです。

Question

前提・実現したいこと

いいね機能を非同期化したのですがリロードをしないと反映されない状態です。
エラーなどはありませんが、リロードをしないといいね機能が反映されない原因をご教授願えますでしょうか。

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

リロードをしないと反映されない状態なので、どの部分に処理ができない原因を突き止めたいです。

該当のソースコード

_favorite-btn.html.erb

<% if tweet.favorited_by?(current_user) %>
  <%= link_to tweet.favorites.count, tweet_favorites_path(tweet), method: :delete, remote: true, class: "fas fa-heart heart_red" %>
<% else %>
  <%= link_to tweet.favorites.count, tweet_favorites_path(tweet), method: :post, remote: true, class: "fas fa-heart heart_blue" %>
<% end %>

$("#tweet_<%= @tweet.id %> .favorite-btn").html("<%= j(render 'favorites/favorite-btn', tweet: @tweet) %>");

$("#tweet_<%= @tweet.id %> .favorite-btn").html("<%= j(render 'favorites/favorite-btn', tweet: @tweet)

<td class="favorite-btn">
<%= render 'favorites/favorite-btn', tweet: tweet%> |
</td>

class FavoritesController < ApplicationController

  def create
    @tweet = Tweet.find(params[:tweet_id])
    favorite = @tweet.favorites.new(user_id: current_user.id)
    favorite.save
  end

  def destroy
    @tweet = Tweet.find(params[:tweet_id])
    favorite = @tweet.favorites.find_by(user_id: current_user.id)
    favorite.destroy
  end
end

試したこと

・部分テンプレートでjsを呼び出すためのremote: trueでfavoritesディレクトリ内にあるcreate.js.erb、destroy.js.erbを呼び出し非同期処理を行えるようにしたが、リロードしないと反映されない
・非同期処理するためのjavascriptが呼ばれていないことが原因かもしれないと思いgemfileにjqueryをダウンロードしているか確認

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

ここにより詳細な情報を記載してください。

Comments

[hoshi-takanori]

「いいね機能の非同期通信」で検索すると　100 件以上出てくるので、どこかに答えがあるのでは？
https://teratail.com/search?q=%E3%81%84%E3%81%84%E3%81%AD%E6%A9%9F%E8%83%BD%E3%81%AE%E9%9D%9E%E5%90%8C%E6%9C%9F%E9%80%9A%E4%BF%A1&sort=updated-desc

[urutoraman]

ご返信有難うございます。同じ様な問題に直面してる記事をみかけましたが
自分の力足らずで解決には至りませんでした。

[skys215]

Rubyには詳しくないですが、<%= %>はサーバー側でレンダーするのではないのでしょうか？
リフレッシュしなくてコンテンツをアップデートしたいのなら$("#tweet_123 .favorite-btn").text(parseInt($("#tweet_123 .favorite-btn")) + 1); で試してください(idが１２３の場合)。

Answer 1

https://teratail.com/questions/143512#reply-217360
https://mercystage.hatenadiary.org/entry/20130207/1360173048

この仕組みはjQueryで動いているらしく、
そもそもRailsでjQueryを使うためには、「jquery_ujs.js」が必要らしいとのこと
<%= javascript_include_tag "JSファイル名" %>
で読み込んだjsファイルの中で、

//= require jquery
//= require jquery_ujs

（現在はjquery_ujs代替のrails_ujsというのもある）