Q&A
前提・実現したいこと
はじめての投稿です。
プログラミングを、12月よりスクールに通い初めて学んでいます。
ruby on rails6で卒業のためのオリジナルアプリの実装を行っております。
現在、卒業のためのオリジナルアプリを作成しています。
投稿したもののコメントに対する,「いいね機能」の実装を行っていますが、非同期通信が上手く行えません。
こちらは、現状取り消し機能はつけておらず、ボタンを押すといいねのカウントがアップするものです。
ボタンを押して、いいね数がカウントされる非同期通信を行えるようにしたいです。
発生している問題・エラーメッセージ
・いいねを押すとデータベースに情報が登録される
・リロードを行うと反映される。
・ターミナルやConsoleにはerrorが表示されていません。
下記のブログ内容がわかりやすかったので参考にさせていただきました。
https://atsukofu.hatenablog.com/entry/2020/06/07/110354
###エラーメッセージ
エラーメッセージは出ていませんが、ボタンクリック時のターミナルの情報を記載いたします
Started GET "/posts/3" for ::1 at 2021-01-27 12:36:17 +0900 Processing by PostsController#show as HTML Parameters: {"id"=>"3"} Post Load (0.4ms) SELECT `posts`.* FROM `posts` WHERE `posts`.`id` = 3 LIMIT 1 ↳ app/controllers/posts_controller.rb:53:in `set_post' Rendering posts/show.html.erb within layouts/application User Load (0.3ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 2 ORDER BY `users`.`id` ASC LIMIT 1 ↳ app/views/posts/show.html.erb:7 ActiveStorage::Attachment Load (0.6ms) SELECT `active_storage_attachments`.* FROM `active_storage_attachments` WHERE `active_storage_attachments`.`record_id` = 3 AND `active_storage_attachments`.`record_type` = 'Post' AND `active_storage_attachments`.`name` = 'image' LIMIT 1 ↳ app/views/posts/show.html.erb:14 User Load (0.2ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1 ↳ app/views/posts/show.html.erb:19 Comment Load (0.2ms) SELECT `comments`.* FROM `comments` WHERE `comments`.`post_id` = 3 ↳ app/views/posts/show.html.erb:26:in `reverse_each' User Load (0.2ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ↳ app/views/posts/show.html.erb:26:in `reverse_each' (0.3ms) SELECT COUNT(*) FROM `likes` WHERE `likes`.`comment_id` = 57 ↳ app/views/likes/_like.html.erb:4 Rendered likes/_like.html.erb (Duration: 1.8ms | Allocations: 1002) (0.2ms) SELECT COUNT(*) FROM `likes` WHERE `likes`.`comment_id` = 56 ↳ app/views/likes/_like.html.erb:4 Rendered likes/_like.html.erb (Duration: 1.5ms | Allocations: 997) (0.2ms) SELECT COUNT(*) FROM `likes` WHERE `likes`.`comment_id` = 55 ↳ app/views/likes/_like.html.erb:4 Rendered likes/_like.html.erb (Duration: 1.5ms | Allocations: 998) (0.2ms) SELECT COUNT(*) FROM `likes` WHERE `likes`.`comment_id` = 54 ↳ app/views/likes/_like.html.erb:4 Rendered likes/_like.html.erb (Duration: 1.5ms | Allocations: 998) Rendered posts/show.html.erb within layouts/application (Duration: 18.4ms | Allocations: 9349) [Webpacker] Everything's up-to-date. Nothing to do Completed 200 OK in 34ms (Views: 26.5ms | ActiveRecord: 2.8ms | Allocations: 19391)
コントローラー
likes_controller.erb
ruby
1class LikesController < ApplicationController 2 3 def create 4 @post = Post.find(params[:post_id]) 5 @comment = Comment.find(params[:comment_id]) 6 @like = Like.create(user_id: current_user.id, post_id: @post.id, comment_id: @comment.id) 7 end 8end
ビュー
html
1<div class="post__comments", id='messeges'> 2 <ul class="comments_lists"> 3 <% @comments.reverse_each do |comment| %> 4 <div id="comment_<%= comment.id %>"> 5 <%= render partial: 'likes/like', locals: {comment:comment}%> 6 </div> 7 <%= link_to comment.user.nickname, root_path, class: :comment_user %> 8 <% end %> 9 </ul> 10 </div> 11 <%= form_with model: [@post, @comment], local: true do |f|%> 12 <div class="field"> 13 <%= f.label :message, "回答する" %><br /> 14 <%= f.text_field :message %> 15 </div> 16 <div class="actions"> 17 <%= f.submit "送信する", class: :form__btn %> 18 </div> 19 <% end %> 20 </div>
ビュー（部分テンプレート）
likes/_like.html.erb
html
1<li class="comments_list"> 2 <p><%= comment.message %></p> 3 <%= button_to 'いいね', post_comment_likes_path(@post.id, comment.id), remote: true %> 4 <%= comment.likes.count %> 5</li>
ビュー（部分テンプレート）
likes/create.js.erb
window.addEventListener('DOMContentLoaded', function(){ $("#comment_<% @comment.id %>").html("<%= j(render partial: 'likes/like', locals: {comment:@comment, post:@post, like:@like}) %>"); });
試したこと
・jQueryの導入はyarn addコマンドから行っています。
・初めのうちは、console上に
Uncaught ReferenceError: $ is not defined
のエラーが現れていたので、
window.addEventListener('DOMContentLoaded', function(){
こちらの記述をたしました。
しかし、他の方の記事を色々と拝見しましたが、こちらの記述を行っている方はいっらしゃいませんでした。
なので、これ以外に読み込み方の順番を返る方法がありその記述が必要かと考えたのですが、原因がわかりませんでした。
もし、解決策や気になることがある方がいらっしゃいましたら、ご教授いただけませんでしょうか。
また、初投稿で不手際や足りないものがあるかもしれません。
ご指摘いただけましたら、その都度更新させていただきます。
よろしくお願いいたします。
2021/2/1
アドバイスをいただき、以下のことを試しました。
jqueryの導入手順は、事前にアドバイスいただいていた手順で行っていましたので、
もう導入箇所を見直しました。
webpack/environment.js
const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery', }) ) module.exports = environment
application.js
require("@rails/ujs").start() //require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('jquery') import '@fortawesome/fontawesome-free/js/all';
しかし、下記のエラーが発生いたしました。
console
VM36:1 Uncaught ReferenceError: $ is not defined at <anonymous>:1:1 at processResponse (rails-ujs.js:283) at rails-ujs.js:196 at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
上記のエラーから、やはりjqueryが読み込めていないと思い下記を試しました。
application.js
//require("turbolinks").start()
application.html.erb
<%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_pack_tag 'application' %> <%#= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%#= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
上記2つのファイルのコメントアウトと記述変更を行いましたが、解決しませんでした。
回答1件
0
たぶん jquery が動いてません。
js
1window.addEventListener('DOMContentLoaded', function(){
これが発火しないので中のjqueryのコードに達しないのでエラーも出てないんだと思います。
Rails6でjQueryの導入方法
を参考にしてください。
jquery の動作を確認したあと、
window.addEventListener('DOMContentLoaded', function(){
を削除し、エラーが出たら追記してください。
投稿2021/01/30 22:42
総合スコア2090
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/01 07:56
2021/02/01 08:14
2021/02/02 01:18