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

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

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

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

JavaScript

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

Q&A

解決済

2回答

4572閲覧

railsを使った「いいね機能」で非同期通信の際にcreate.js.erbを読み込まない

Masaya_Murakami

総合スコア25

Ruby on Rails

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

JavaScript

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

0グッド

3クリップ

投稿2016/10/24 14:48

編集2016/10/25 02:41

###前提・実現したいこと
ホーム画面で一つ一つの投稿に対していいね機能をつけたいと思っています。具体的にはユーザーがいいねを押すとハートの色が変わり、もう一度押すと色が戻るといったことをajaxの非同期通信を使って行いたいです。

###発生している問題・エラーメッセージ
現在は、画面上でいいねを押すとcreateアクションによってlikesテーブルにレコードが追加されますが、サイト上でリロードを行わない限りハートの色は変わらず、何回でもいいねボタンを押せてしまうといった問題があります。いいね機能自体はリロードを行えばしっかり動くのですが、createアクション(またはdestroyアクション)を行った後にcreate.js.erb(またはdestroy.js.erb)が読み込まれていないことに困っています。

###view/posts/index.html.erb

#全ての投稿に対してeachメソッドを使って取得したpost <%= render partial: "likes/like", locals: { post: post, like: @likes } %>

###view/likes/_like.html.erb

<% if user_signed_in? %> <% if post.like_user(current_user.id) %> <%= button_to post_like_path(like,post_id: post.id), method: :delete, id: "like-button", remote: true do %> <%= image_tag("icon_red_heart.svg") %> <span> <%= post.likes_count %> </span> <% end %> <% else %> <%= button_to post_likes_path(post.id), id: "like-button", remote: true do %> <%= image_tag("icon_heart.svg") %> <span> <%= post.likes_count %> </span> <% end %> <% end %> <% else %> <%= image_tag("icon_heart.svg") %> <span> <%= post.likes_count %> </span> <% end %>

###posts_controller

class PostsController < ApplicationController def index @posts = Post.all.order('created_at DESC') @likes = Like.where(user_id: current_user) end def new end def create Post.create(song_title: post_params[:song_title], singer: post_params[:singer], youtube_url: post_params[:youtube_url], text: post_params[:text], user_id: current_user.id) end def show @post = Post.find(params[:id]) end def destroy post = Post.find(params[:id]) if post.user_id == current_user.id post.destroy end end def edit @post = Post.find(params[:id]) end def update post = Post.find(params[:id]) if post.user_id == current_user.id post.update(post_params) end end private def post_params params.permit(:song_title, :singer, :youtube_url, :text) end end

###likes_controller

class LikesController < ApplicationController before_action :set_post def create Like.create(user_id: current_user.id, post_id: params[:post_id]) @like = Like.where(user_id: current_user) @post.reload end def destroy like = Like.find_by(user_id: current_user.id, post_id: params[:post_id]) like.destroy @likes = Like.where(user_id: current_user) @post.reload end private def set_post @post = Post.find(params[:post_id]) end end

###/view/likes/create.js.erb

$("#like-buttons").html("<%= j(render partial: 'likes/like', locals: { posts: @posts, likes: @likes, like: @like}) %>")

###view/likes/destroy.js.erb

$("#like-buttons").html("<%= j(render partial: 'likes/like', locals: { posts: @posts, likes: @likes }) %>");

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

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

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

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

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

guest

回答2

0

自己解決

投稿のそれぞれに違うidを持たせることによって解決。

投稿2016/10/29 00:29

Masaya_Murakami

総合スコア25

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

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

0

各js.erbの $("#like-buttons")$("#like-button") にしてみてはいかがでしょう?

投稿2016/10/25 03:08

hana-da

総合スコア1728

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

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

Masaya_Murakami

2016/10/25 06:08

コメントありがとうございます。 ご指摘していただいた点を直してみましたが、やはり各js.erbファイルは読み込まれることなく、リロードをすることでいいね機能が動くという状態です。 他に問題点がありましたら、ご指摘よろしくお願いします。
hana-da

2016/10/27 23:11

そもそもルーティングはどうなっているんですかね。 post_like_path(like,post_id: post.id) がどこに行くのかを質問に追記してもらえると何かわかるかもしれません。
Masaya_Murakami

2016/10/29 00:28

idを全てlike-buttonにしていたことが原因でした。そこでindex内でeach_with_indexをして、それぞれ異なるidを持たせることがこの問題に関しては解決しました。 ありがとうございました。
hana-da

2016/11/01 07:14

解決してよかったです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問