Q&A
前提・実現したいこと
いいね機能を非同期通信で実装したい。
発生している問題・エラーメッセージ
いいねをクリックしても更新されないが、リロードをすると更新はできる。
該当のソースコード
[view/user/roadshow.html.erb]
<div class="container road-container"> <div class="row"> <h1 class="g-title">目標！</h1> <% if @user.goal %> <h2 class="g-text"><%= @user.goal %></h2> <% else %> <h3 class="g-text">目標はまだ決めていません！</h3> <% end %> <% if @studies.empty? %> <div class="n-studies"> <h3 class="n-studies-title">ロードマップは未作成です</h3> <% if @current_user== @user%> <%= link_to( "作成する！",new_study_path,class:"user-edit-btn btn btn-primary r-btn" ) %> <% end %> </div> <% else %> <h4 class="study-title">学習手順</h4> <div class="row studies"> <% @studies.each.with_index(1) do |study,i| %> <div class="d-flex flex-row col-lg-3 study-contents"> <div class="study-content"> <div class="study-numbers"> <h4 class="study-text study-num"><%= i %></h4> </div> <h4 class="study-text">学習内容：<%= study.content %> </h4> <h4 class="study-text"> <%if study.material.empty? %> 学習教材：未定 <% else %> 学習教材：<%= study.material %> <% end %> </h4> <h4 class="study-text"> <%if study.period.nil? %> 学習完了予定日：未定 <% else %> 学習完了予定日：<%= study.period %>まで <% end %> </h4> <% if @current_user== @user%> <div class="study-edit-btns"> <%= link_to( "編集",edit_study_path(study) ,class:"btn btn-primary study-edit-btn ") %> <%= link_to("削除" ,"/study/#{study.id}/destroy",class:"btn btn-primary study-edit-btn",method: :post)%> </div> <% end %> <div id="likes_buttons_<%= study.id %>"> <%= render partial: 'like/like', locals: { study: study} %> </div> </div> </div> <% end %> </div> <% if @user == @current_user %> <div class="add-study-btn"> <%= link_to( "追加","/study/new",class:"btn btn-primary study-edit-btn" ) %> </div> <% end %> <% end %> </div> </div>
[like/_like.html.erb]
<% if study.liked_by?(@current_user) %> <%= link_to study_like_path(study.id),method: :delete,class:"like_btn",remote: true do %> <i class="far fa-thumbs-up liked"></i> <span><%= study.likes.count %></span> <% end %> <% else %> <%=link_to "/study/#{study.id}/like", method: :post ,class:"like_btn",remote: true do%> <i class="fas fa-thumbs-up"></i> <span><%= study.likes.count %></span> <% end %> <% end %>
[view/create.js.erb]
$('#likes_buttons_<%= @study.id %>').html("<%= j(render partial: 'like/like', locals: {study: @study}) %>");
[view/destroy.js.erb]
$('#likes_buttons_<%= @study.id %>').html("<%= j(render partial: 'like/like', locals: {study: @study}) %>");
[like_controller.rb]
class LikeController < ApplicationController before_action :study_params def create Like.create(user_id: @current_user.id, study_id: params[:study_id]) end def destroy Like.find_by(user_id: @current_user.id, study_id: params[:study_id]).destroy end private def study_params @study = Study.find_by(params[:user_id]) end end
[models/study.rb]
# frozen_string_literal: true class Study < ApplicationRecord validates :content, presence: true validates :user_id, presence: true has_many :likes def liked_by?(user) likes.where(user_id: user.id).exists? end end
[application.html.erb]
<html> <head> <title>ShareRoadMap</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all'%> <%= javascript_pack_tag 'application'%> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> </head> 以下省略
[application.js]
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" Rails.start() Turbolinks.start() ActiveStorage.start() //= require activestorage // require turbolinks //= require jquery //= require jquery_ujs //= require_tree .
[gemfile]
# frozen_string_literal: true source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.3' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main' gem 'rails', '~> 6.1.3' gem 'bootstrap', '~> 4.3.1' gem 'jquery-rails' gem 'rails-i18n' # Use sqlite3 as the database for Active Record gem 'pg', group: :production gem 'sqlite3', group: %i[development test] # Use Puma as the app server gem 'puma', '~> 5.0' # Use SCSS for stylesheets gem 'sass-rails', '>= 6' # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker gem 'webpacker', '~> 5.0' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks # gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use Active Model has_secure_password gem 'bcrypt', '~> 3.1.7' ..以下省略
試したこと
・turbolinksの無効化
[application.html.erb],[gemfile],[appliction.js]からturbolinksmに関する記載を削除しましたが、解消されませんでした。
・jQueryの動作確認
jQueryが動作しているか確認するため[crete.js.erb]と[destroy.js.erb]にalertを設置してみました。その結果クリックされると正常にアラートは表示されましたので、jQueryは正しく動作していると思います。
・logの確認
crete時とdestroy時のlogを確認すると、以下のように表示され、logではエラーが発生していないため、どこでうまくいっていない確認することができませんでした。
[create時のlog]
※destoryのときも以下のように時にエラーが吐かれている形跡は見当たりませんでした。
Started POST "/study/41/like" for 127.0.0.1 at 2021-04-24 15:22:08 +0900 Processing by LikeController#create as JS Parameters: {"study_id"=>"41"} User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 20], ["LIMIT", 1]] ↳ app/controllers/application_controller.rb:10:in `set_current_user' Study Load (0.1ms) SELECT "studies".* FROM "studies" LIMIT ? [["LIMIT", 1]] ↳ app/controllers/like_controller.rb:13:in `study_params' CACHE User Load (0.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 20], ["LIMIT", 1]] ↳ app/controllers/like_controller.rb:4:in `create' TRANSACTION (0.1ms) begin transaction ↳ app/controllers/like_controller.rb:4:in `create' Study Load (0.2ms) SELECT "studies".* FROM "studies" WHERE "studies"."id" = ? LIMIT ? [["id", 41], ["LIMIT", 1]] ↳ app/controllers/like_controller.rb:4:in `create' Like Create (1.5ms) INSERT INTO "likes" ("user_id", "study_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["user_id", 20], ["study_id", 41], ["created_at", "2021-04-24 06:22:08.815696"], ["updated_at", "2021-04-24 06:22:08.815696"]] ↳ app/controllers/like_controller.rb:4:in `create' TRANSACTION (1.3ms) commit transaction ↳ app/controllers/like_controller.rb:4:in `create' Rendering like/create.js.erb Like Exists? (0.3ms) SELECT 1 AS one FROM "likes" WHERE "likes"."study_id" = ? AND "likes"."user_id" = ? LIMIT ? [["study_id", 1], ["user_id", 20], ["LIMIT", 1]] ↳ app/models/study.rb:8:in `liked_by?' (0.2ms) SELECT COUNT(*) FROM "likes" WHERE "likes"."study_id" = ? [["study_id", 1]] ↳ app/views/like/_like.html.erb:9 Rendered like/_like.html.erb (Duration: 4.9ms | Allocations: 1721) Rendered like/create.js.erb (Duration: 6.2ms | Allocations: 1975) Completed 200 OK in 32ms (Views: 6.3ms | ActiveRecord: 3.9ms | Allocations: 9641)
補足情報（FW/ツールのバージョンなど）
Ruby 2.6.3
Rails6.1.3.1
対処法をいくつか調べ検証しましたが、どれも解消できず、解決方法がわかりませんでした。
申し訳ありませんが、ご教授のほどよろしくお願いいたします。
※記述量が制限されるため、必要でありそうな箇所のみ添付しています。
あなたの回答
tips
プレビュー
