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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1196閲覧

Ajaxでイイね!処理(rails)

tomtom1

総合スコア168

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/06/11 14:20

編集2022/01/12 10:55

前提・実現したいこと

Postへのイイね!機能を追加し、正常に動きます。
しかしイイね!ボタンを押すと画面の更新されてしまうため、ajaxを導入しようと考えました。
下記サイトを参考にしましたが、まだ実現できずにおります。
https://qiita.com/naberina/items/c6b5c8d7756cb882fb20

index

1 <div id="likes_buttons_<%= post.id %>"> 2 <%= render partial: 'likes/like', locals: { post: post} %> 3 </div>

ruby

1*_like.html.erb 2 <% if Like.find_by(user_id: @current_user.id, post_id: post.id) %> 3 <%= link_to("/likes/#{post.id}/destroy", method: :post, remote: true) do %> 4 <span class="fa fa-heart icon-size like-btn-unlike"></span> 5 <% end %> 6 <% else %> 7 <%= link_to("/likes/#{post.id}/create", method: :post, remote: true) do %> 8 <span class="fa fa-heart icon-size like-btn"></span> 9 <% end %> 10 <% end %> 11 <%= Like.where(post_id: post).count %>

js

1*create.js.erb 2$('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>");

js

1*destroy.js.erb 2$('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>");

Controller

1class LikesController < ApplicationController 2 def create 3 @like = Like.new(user_id: @current_user.id, post_id: params[:post_id]) 4 @like.save 5 end 6 def destroy 7 @like = Like.find_by(user_id: @current_user.id, post_id: params[:post_id]) 8 @like.destroy 9 end 10end

###現状
indexにて、Postにいいね!を押しても反応がありません。しかしページを更新したら反映します。
したがって、ボタンを押した際に、create.js.erb或いはdestroy.js.erbの部分の呼び出し、そして更新が出来ていないと考えます。現状ここで止まっています。
また、下記の内容を追加すると、エラーが出てしまいます。(ですので、今は取り除いてます。)

js

1application.js 2//= require rails-ujs 3//= require activestorage 4//= require turbolinks 5//= require_tree . 6//= require jquery

Error

1Sprockets::FileNotFound in Posts#index 2couldn't find file 'jquery' with type 'application/javascript'

###修正/追加後

js

1application.js 2//= require rails-ujs 3//= require jquery 4//= require jquery_ujs 5//= require activestorage 6//= require turbolinks 7//= require_tree .

gem

1gem 'jquery-rails' 2gem 'jquery-ui-rails'

Error

1*post時 2Started POST "/likes/3/create" for 127.0.0.1 at 2019-06-12 01:17:20 +0900 3Processing by LikesController#create as JS 4 Parameters: {"post_id"=>"3"} 5 User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]] 6 ↳ app/controllers/application_controller.rb:6 7 (0.1ms) begin transaction 8 ↳ app/controllers/likes_controller.rb:7 9 CACHE User Load (0.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]] 10 ↳ app/controllers/likes_controller.rb:7 11 Post Load (0.2ms) SELECT "posts".* FROM "posts" WHERE "posts"."id" = ? LIMIT ? [["id", 3], ["LIMIT", 1]] 12 ↳ app/controllers/likes_controller.rb:7 13 Like Create (0.3ms) INSERT INTO "likes" ("user_id", "post_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["user_id", 1], ["post_id", 3], ["created_at", "2019-06-11 16:17:20.936859"], ["updated_at", "2019-06-11 16:17:20.936859"]] 14 ↳ app/controllers/likes_controller.rb:7 15 (9.2ms) commit transaction 16 ↳ app/controllers/likes_controller.rb:7 17 Rendering likes/create.js.erb 18 Rendered likes/create.js.erb (341.5ms) 19Completed 500 Internal Server Error in 406ms (ActiveRecord: 10.0ms) 20 21ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x00007fd4ddb6d190>:0x00007fd4e05c8db8>): 22 1: $('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>"); 23 24app/views/likes/create.js.erb:1:in `_app_views_likes_create_js_erb___3843924283153595975_70276136979320' 25 26 27 28*destory時 29Started POST "/likes/3/destroy" for 127.0.0.1 at 2019-06-12 01:45:42 +0900 30Processing by LikesController#destroy as JS 31 Parameters: {"post_id"=>"3"} 32 User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]] 33 ↳ app/controllers/application_controller.rb:6 34 Like Load (0.1ms) SELECT "likes".* FROM "likes" WHERE "likes"."user_id" = ? AND "likes"."post_id" = ? LIMIT ? [["user_id", 1], ["post_id", 3], ["LIMIT", 1]] 35 ↳ app/controllers/likes_controller.rb:12 36 (0.0ms) begin transaction 37 ↳ app/controllers/likes_controller.rb:13 38 Like Destroy (0.2ms) DELETE FROM "likes" WHERE "likes"."id" = ? [["id", 16]] 39 ↳ app/controllers/likes_controller.rb:13 40 (9.3ms) commit transaction 41 ↳ app/controllers/likes_controller.rb:13 42 Rendering likes/destroy.js.erb 43 Rendered likes/destroy.js.erb (344.0ms) 44Completed 500 Internal Server Error in 401ms (ActiveRecord: 9.9ms) 45 46 47 48ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x00007fd4ddb6d190>:0x00007fd4e100c900>): 49 1: $('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>"); 50 51app/views/likes/destroy.js.erb:1:in `_app_views_likes_destroy_js_erb___3195171927017731297_70276142362720'

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

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

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

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

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

guest

回答1

0

destroyの

$('#likes_buttons_<%= blog.id %>')

の部分でpost.idではなく、blog.idを指定しているからではないでしょうか。

投稿2019/06/11 14:28

tail12

総合スコア607

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

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

tomtom1

2019/06/11 14:42

ご指摘ありがとうございます。 修正して確認しましたが、残念ながら変化は見受けられませんでした。 本来必要なreloadをする処理等があるのかなと考えていましたが、 その点についてご指摘がないということはreload(更新)処理はちゃんと現コードでできているはずということですね。勉強になります。 上記、記述内容も修正致しました。
tail12

2019/06/11 14:47

あと怪しいのはこちらですね。 //= require jquery これが動いていないのが問題になっていそうです。 https://teratail.com/questions/76543 これなども参考にして見るといいかもしれないです。
tomtom1

2019/06/11 15:17

有難うございます、大変参考になります。 URLを参考に、追加と修正を行いましたが、まだいいね!の更新の変化が見れませんでした。 しかしながら、//= require queryを追加する際のエラーは無くなりました。 application.jsとgemの修正/追加後の内容も記入致しました。
tail12

2019/06/11 15:49

あっ今気づきましたが、destroyのmethodがpostになってますね。
tomtom1

2019/06/11 16:24

その点についてですが、何故かdestoryにmethodをdeleteにした場合、destroyの反応を得れず、postにした場合、deleteが出来たのでそのままにしておりました。 また、post時とdelete時、ログで「ActionView::Template::Error」のエラー出ていることに気づきましたので、再度追記に追加致しました。 locals: {post: post}がどのような意味かあまり理解していませんが、ここがおかしいということでしょうか
tail12

2019/06/11 16:38 編集

ん、 destroyなのに、 `/likes/3/create` createが呼ばれていますね。 あと気になるのは、postという変数がundefinedという点ですね。
tomtom1

2019/06/11 16:52 編集

申し訳ありません。その点についてはコピペミスでした! 修正致しました。 postという変数がundefinedの点.. locals: { post: post}も敢えてlocals: { post: @post}とかでトライしてみたのですが、 エラーが出てしまい、全くわからずにいます。
tail12

2019/06/11 16:54

記事の場合、 <% @blogs.each do |blog| %>で作成したblogという変数を、locals: { blog: blog} を利用して渡しているのですが、 質問者さんの場合は、postというローカル変数をどのように定義・取得してますか?
tomtom1

2019/06/11 17:43

ご質問/ご指摘大変分かりやすいです。そこを見るのですか..。 私の方では、<% @posts.each do |post| %>と記述しています。
tomtom1

2019/06/12 06:28 編集

エラー:ActionView::Template::Error (undefined method `post' for nil:NilClass): 1: $('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>"); こちらのundefended methodとされるpostは、localsではなく、<%= @post.id %>のpostのことでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問