リロードしないといいね機能が反映されない

ajaxでいいね機能を実装できるようにしたい

現在、ユーザーが特定の投稿にいいねをできる機能をajaxを用いて実装をしているのですが、リロードをしないと反映されない状態です。

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

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

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

該当のソースコード

app/views/uploads/index.html.erb

erb
1<div class="star-btn" id="favorite_"<%= upload.id %>
2 <%= render partial: "favorites/favorite", locals: {upload: upload} %>
3</div>

app/views/favorites/_favorite.html.erb

erb
1<% if user_signed_in? %>
2  <% if upload.favorited_by?(current_user) %>
3    <%= link_to upload_favorites_path(upload.id), method: :delete, remote: true do %>
4      <i>いいねを外す</i>
5    <% end %>
6    <span><%= upload.favorites.count %></span>
7  <% else %>
8    <%= link_to upload_favorites_path(upload.id), method: :post, remote: true do %>
9      <i>いいねをする</i>
10    <% end %>
11    <span><%= upload.favorites.count %></span>
12  <% end %>
13<% end %>

app/views/favorites/create.js.erb

erb
1$('#favorite_<%= @upload.id %>').html("<%= j(render partial: "favorites/favorite", locals: { upload: @upload}) %>");

app/views/favorites/destroy.js.erb

erb
1$('#favorite_<%= @upload.id %>').html("<%= j(render partial: "favorites/favorite", locals: { upload: @upload}) %>");

app/config/routes

ruby
1Rails.application.routes.draw do
2  devise_for :users
3  get 'uploads/index'
4  root to: "uploads#index"
5  resources :uploads do
6    resource :favorites, only: [:create, :destroy]
7  end
8
9  resources :users, only: [:show, :edit, :update] do
10    get :favorites, on: :collection
11  end
12end

app/controllers/favorites_controller

controller
1Rails.application.routes.draw do
2  devise_for :users
3  get 'uploads/index'
4  root to: "uploads#index"
5  resources :uploads do
6    resource :favorites, only: [:create, :destroy]
7  end
8
9  resources :users, only: [:show, :edit, :update] do
10    get :favorites, on: :collection
11  end
12end

app/models/favorite.rb

model
1class Favorite < ApplicationRecord
2
3  belongs_to :upload
4  belongs_to :user
5
6  validates_uniqueness_of :upload_id, scope: :user_id
7end
8

Gemfile

gem
1gem "jquery-rails"
2

app/javascript/packs/application.js

js
1// This file is automatically compiled by Webpack, along with any other files
2// present in this directory. You're encouraged to place your actual application logic in
3// a relevant structure within app/javascript and only use these pack files to reference
4// that code so it'll be compiled.
5
6import Rails from "@rails/ujs"
7import Turbolinks from "turbolinks"
8import * as ActiveStorage from "@rails/activestorage"
9import "channels"
10
11// Bootstrap
12//= require underscore
13//= require gmaps/google
14//= require bootstrap-sprockets
15//= require jquery
16Rails.start()
17// Turbolinks.start()
18ActiveStorage.start()
19require("../menu")
20require("../slick")

試したこと

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

###参考にした文献

Qiita
Qitta
Qiita