質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

864閲覧

RubyOnRailsでいいね機能を非同期通信(Ajax)で実装したい

rakuiti00

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/11/03 05:22

前提・実現したいこと

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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問