前提・実現したいこと
RubyOnRailsでいいね機能を通常の同期処理で実装したので、
Ajaxで非同期通信化を行いたいと思っています。
https://qiita.com/naberina/items/c6b5c8d7756cb882fb20
上記の参考ページをもとに一旦、機能や仕組みの確認を行いたいと思い、
自分の現状のアプリに合わせて修正を行い、実装したのですが、
ページを読み込みしないといいねボタンが更新されません。
ターミナル
Started POST "/posts/36/likes?id=36" for ::1 at 2021-11-03 13:51:46 +0900 Processing by LikesController#create as JS Parameters: {"id"=>"36", "post_id"=>"36"} User Load (34.4ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1 ↳ app/controllers/likes_controller.rb:5:in `create' (0.1ms) BEGIN ↳ app/controllers/likes_controller.rb:8:in `create' User Load (5.4ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1 ↳ app/controllers/likes_controller.rb:8:in `create' Post Load (6.7ms) SELECT `posts`.* FROM `posts` WHERE `posts`.`id` = 36 LIMIT 1 ↳ app/controllers/likes_controller.rb:8:in `create' Like Create (20.3ms) INSERT INTO `likes` (`user_id`, `post_id`, `created_at`, `updated_at`) VALUES (1, 36, '2021-11-03 04:51:46.769254', '2021-11-03 04:51:46.769254') ↳ app/controllers/likes_controller.rb:8:in `create' (1.5ms) COMMIT ↳ app/controllers/likes_controller.rb:8:in `create' Post Load (0.3ms) SELECT `posts`.* FROM `posts` WHERE `posts`.`id` = 36 LIMIT 1 ↳ app/controllers/likes_controller.rb:10:in `create' Rendering likes/create.js.erb Like Load (5.9ms) SELECT `likes`.* FROM `likes` WHERE `likes`.`user_id` = 1 AND `likes`.`post_id` = 36 LIMIT 1 ↳ app/views/likes/_like.html.erb:2 (0.8ms) SELECT COUNT(*) FROM `likes` WHERE `likes`.`post_id` = 36 ↳ app/views/likes/_like.html.erb:5 Rendered likes/_like.html.erb (Duration: 9.9ms | Allocations: 1797) Rendered likes/create.js.erb (Duration: 13.1ms | Allocations: 2198) Completed 200 OK in 113ms (Views: 11.1ms | ActiveRecord: 75.5ms | Allocations: 22483)
該当のソースコード
ruby
1-_post.html.erb(呼び出し元) 2 3<div class='item'> 4 <%= link_to post_path(post.id) do %> 5 <%= image_tag post.image %><br> 6 <%= post.title %><br> 7 <% end %> 8 9 <%= link_to post.user.nickname , user_path(post.user.id), id: "user_link" %><br> 10 11 <% if post.advice_flag %> 12 <span>アドバイス・指摘等お願いします</span><br> 13 <% end %> 14 15 <!-- 部分的に更新 --> 16 <div id="likes_buttons_<%= post.id %>"> 17 <%= render partial: 'likes/like', locals: { post: post} %> 18 </div> 19 20</div> 21
ruby
1-_like.html.erb 2 3 4 <% if user_signed_in? %> 5 <% if Like.find_by(user_id: current_user.id,post_id: post.id) %> 6 <%= link_to(post_like_path(id: post.id,post_id: post.id),method: :delete,remote: true) do %> 7 <span class="fa fa-heart like_btn_on"></span> 8 <%= Like.where(post_id: post.id).count %> 9 <% end %> 10 <% else %> 11 <%= link_to(post_likes_path(id: post.id,post_id: post.id),method: :post,remote: true) do %> 12 <span class="fa fa-heart like_btn_off"></span> 13 <%= Like.where(post_id: post.id).count %> 14 <% end %> 15 <% end %> 16 <%# ログインしていない場合はいいねの総数のみを表示 %> 17 <% else %> 18 <span class="fa fa-heart like_btn_on"></span> 19 <%= Like.where(post_id: post.id).count %> 20 <% end %>
ruby
1-likes_controller.rb 2 3 4class LikesController < ApplicationController 5 6 def create 7 @like = Like.new( 8 user_id: current_user.id, 9 post_id: params[:post_id] 10 ) 11 @like.save 12 13 @post = Post.find(params[:post_id]) 14 15 end 16 17 def destroy 18 @like = Like.find_by( 19 user_id: current_user.id, 20 post_id: params[:post_id] 21 ) 22 @like.destroy 23 24 @post = Post.find(params[:post_id]) 25 26 end 27 28end
js
1- likes/create.js.erb 2 3-_$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");
js
1-destroy.js.erb 2 3$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>")
試したこと
ターミナルの情報からエラーは起こっておらず、リロードをすれば通常のいいね機能のように動作はします。
リクエストはJSで送られており、
部分テンプレートの_like.html.erb
書き換えるためのJSファイル、coreate.js.erbも読み込まれているように見えます。
Jqueryのgemもインストール済みです。
application.jsにrequire("jquery")記入済み
その他、必要なことがあればご教示いただきたいです。
初めての質問で至らない点や不足等あると思いますが、
何卒よろしくお願いいたします。
補足情報(FW/ツールのバージョンなど)
ruby (2.6.5)
rails (6.0.0)
jquery-rails (4.4.0)
あなたの回答
tips
プレビュー