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

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

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

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

Q&A

0回答

626閲覧

いいね機能がリロードしないと動きません。

ueda_kesuke

総合スコア34

Ruby on Rails

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

0グッド

1クリップ

投稿2020/01/01 12:44

編集2022/01/12 10:55

railsアプリにいいね機能を実装しました。
しかし、いいねボタンを押した後にすぐに色が反映されません。
ターミナルはきちんと動いていていて、createされているのですが、リロードしないと色がついていないという状況です。
(クラスをjsによって入れ替えたいです)

実装の際に参考にした記事
[Rails]いいね機能の非同期での実装!!!
##コード

↓viewになります

<span id="work-<%= @work.id %>-like1"> <%= render 'shared/likes', work: @work, like: @like %> </span>

↓viewに入っている部分テンプレートになります。

<% if user_signed_in? %> <% if work.like_user(current_user.id) %> <%= button_to work_like_path(work), class: "fav", method: :delete, remote: true do %> <i class="fas fa-heart"></i> <span> <%= work.likes_count %> </span> <% end %> <% else %> <%= button_to work_like_path(work), class: "fav", remote: true do %> <i class="far fa-heart"></i> <span> <%= work.likes_count %> </span> <% end %> <% end %> <% else %> <i class="far fa-heart"></i> <span> <%= work.likes_count %> </span> <% end %>

↓create.js.erbになります。

$("#work-<%= @work.id %>-like").html("<%= j(render 'likes/likes', work: @work, like: @like) %>")

↓destroy.js.erbになります。

$("#work-<%= @work.id %>-like").html("<%= j(render 'likes/likes', work: @work, like: @like) %>")

↓likes_controllerになります。

class LikesController < ApplicationController def create @work = Work.find(params[:work_id]) @like = Like.create(user_id: current_user.id, work_id: params[:work_id]) @work.reload end def destroy @work = Work.find(params[:work_id]) @like = Like.find_by!(user_id: current_user.id, work_id: params[:work_id]).destroy! @work.reload end end

##ターミナル
viewでいいねボタンを押した時の挙動になります。
イメージ説明

この時点でページのリロードはしていません。
この時点で色を反映させたいです(クラスをjsによって入れ替えたい)。

##試したこと
turbolinksの削除

ご教授いただけると幸いです。
足りない情報などありましたら教えていただきたいです????‍♂️

追記です。jsが発火しているかconsole.logで確認したのですが、反映されています。

create.js.erbの1行目にconsol.logを入れると反応、最終行に入れるとせず、1行目&最終行の両方に入れるとどちらも反応する

といった状況です。

jsコンソールに「rails-ujsとjquery-ujsがダブっているのでrails-ujsのみを使用しろ」というエラーが出ていました。指示通りにjquery-ujsを消したのでエラー自体は解消したのですが、根本の問題はいまだ解決できず、という状況です。

####追記です。modelを追記しました。
work.rb

def like_user(user_id) likes.find_by(user_id: user_id) end

like.rb

class Like < ApplicationRecord belongs_to :work, counter_cache: :likes_count belongs_to :user end

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/01/01 16:14 編集

create.js.erb の中に console.log をはさんでみて表示されますか? JS の render まではできてますがその JS をブラウザが受け取って JS として実行されてないのか、されてるけど入れ替えた表示が間違ってるのか切り分ける必要があります。前者だとするとバージョンが記載されてないので詳細不明ですが remote:true を機能させるための jquery_ujs か rails_ujs は読み込まれてますか?
ueda_kesuke

2020/01/01 23:42

ありがとうございます!追記いたしました。表示はされています。 ちなみに「rails_ujs」「jquert_ujs」はbootstrapを使用したかったので両方とも読み込んでいます。
退会済みユーザー

退会済みユーザー

2020/01/02 05:43

最初が shared/likes で JS で likes/likes におきかえるんですよね。likes/likes の中身がわからないので「色が変わる」というのがよくわからないですが like/likes におきかわってるけどその中で色が変わるようなビューになってないということはありませんか?
ueda_kesuke

2020/01/02 08:12

失礼しました! 部分テンプレートと書いている部分がlikes/likesファイルです。shared/likesではなくlikes/likesですね、、。現在は部分テンプレ内でif 文を使用し、fontawsomeのアイコンを入れ替えて色を反映させるという記述にしてあります????‍♂️
退会済みユーザー

退会済みユーザー

2020/01/02 09:31 編集

遷移はなんとなくわかりました。work.user_id が一致すると far => fas になるはずなんですね。そうなると work.like_user のスコープも見ないと原因がわからないかもです。 あと devise の設定もあってるか不明なので <% if work.like_user(current_user.id) %> の次に <% puts 'xxxxx' %> とかはさんでおきかわるビューの分岐が機能してて fas になってるか確認したほうがいいかもです。そこに制御が来てるなら model は貼る必要はないです。 > 最終行に入れるとせず これが気になりますね JSが完動してるなら最終行にいれても絶対出るはずなのでおきかえるJSがなにかしらおかしい気がしますね。 count は増えてるんでしょうか? count が増えてるなら JS は動いてる証明になります 増えてない場合 chrome の developer ツールのコンソールとかにはエラー等はでてないんでしょうか? ajax 内のエラーは赤文字じゃなく警告みたいな色で出ます。 あと create を押す前に一番最初に表示したとき の view も create アクションなんでしょうか? それ以外だと @work がセットされてないので html の id が nil が入ってる気がします それでそもそもおきかえるべき jQuery DOM が存在しない可能性もあります
ueda_kesuke

2020/01/02 11:58

> <% puts 'xxxxx' %> ここの分岐はきちんと出ていました。 > chrome の developer ツールのコンソールとかにはエラー等はでてないんでしょうか? https://qiita.com/hisas/items/8399aec3a5377bf75017 上記のエラーが出ていたため記事に従ってみたのですが、解決せず、、という感じです。 > create を押す前に一番最初に表示したとき の view も create アクションなんでしょうか? すいません、、、他のいいね記事も参照したのですが、全てcreateアクションからスタートしていましてどうすれば良いのかという状況です。
退会済みユーザー

退会済みユーザー

2020/01/02 14:36 編集

> 上記のエラーが出ていた javascript にエラーが出てるんですか? そういう大事なことは先にいってほしかったですが 上記と同じエラー内容で間違いないんでしょうか? 情報を小出しにされると正解にたどりつけないので すべての情報をだしきっていただきたいです その上で原因が分かった場合のみお答えさせていただきます 全部のコードを貼れば自分じゃなくても誰かが回答できるとおもうんですが はってないコードの中でエラーが起きてたら回答できるわけがないです
ueda_kesuke

2020/01/03 00:38

おっしゃる通りでした。エラーが出ていたことに気づけず(というかコンソールをみれていませんでした)、時間をお取りして申し訳ないです。こちらのjsエラー自体は解決しております。
退会済みユーザー

退会済みユーザー

2020/01/03 07:18 編集

JSのエラーがない状態でもまだいいねの内容が更新できないってことですか? JSが機能してるとすれば考えられるのは次の2パターンで 1. おきかわる内容が前回と同じ 3箇所ある <%= work.likes_count %> の後に 1 とか 2 とか 3 とかいれて ビューを表示してみてどのブロックが今表示されてるか確認する(特に初期状態) 2. JS をいれかえるためDOMが取得できてない create.js.erb の最期に console.log($("#work-<%= @work.id %>-like").length()); をいれてDOMの個数が1であるか確認する あたりかと思います 1だとするとモデル内のスコープにかかれてる work.like_user(current_user.id) の中身がわからない限りこちらでは原因を特定できません Rails 等フルスタックフレームワーク内で質問をするのであれば関係する view, controller, model, JS, CSS すべて提示したほうがいいかと思います
ueda_kesuke

2020/01/03 12:58

ありがとうございます! >1. おきかわる内容が前回と同じ いいねボタンを押す前後で数字は変わりました。初期は2でアクション後は1になりました。 >2. JS をいれかえるためDOMが取得できてない consoleに表示することができませんでした,,,。 試しにconsole.log("XXXXXXXX")も打ってみましたがconsole内に変化なしという状況です。
退会済みユーザー

退会済みユーザー

2020/01/03 13:58

数字が変わったのならJSも Rails も問題ないと思うんですが いま問題なのはハートのクラスが fas => far になってるはずなのに色がかわらないってことでいいんですよね?
ueda_kesuke

2020/01/04 00:36

おっしゃる通りです。 ターミナル上でも確認するために、<%= work.likes_count %> の後に<% puts "1" %>、<% puts "2" %>とかやってみました。 いいねボタンを押すと2→1に変化しますが、リロードしないと色が反映されないです。
退会済みユーザー

退会済みユーザー

2020/01/04 01:31

create.js.erb の .html を .append にするとどうなりますか? ボタンをおすたびに追加されるはずですが
ueda_kesuke

2020/01/04 04:55

ありがとうございます。 .htmlの時と挙動が同じですね、、。
退会済みユーザー

退会済みユーザー

2020/01/04 10:38

> いいねボタンを押す前後で数字は変わりました とあるんですが押した瞬間に数字は変わらないってことです?
ueda_kesuke

2020/01/05 02:44

そうですね。押した瞬間にはviewに変化はなしです。リロードすると変わります。
退会済みユーザー

退会済みユーザー

2020/01/05 10:56 編集

> .htmlの時と挙動が同じですね、、。 append で追加されないのならやっぱり JS が動いてないと思うのですが > 押した瞬間に[fas => far]の入れ替わりはおきた では動いてるように見えるので > 押した瞬間にはviewに変化はなし ではやっぱり動いてないように見えます ステートをもっていて特定の状況でのみJSが動いてるのか 問題が複数あって少しずつ解決している状態なのかよくわかりません どういう場面で何がおこってるかを質問文に「正確に」追記して 解決した部分は解決したと報告していったほうがいいと思います とくにリロードして入れ替わるのか押した瞬間に入れ替わるのか やり取りの間で頻繁に誤解が生じてる感じがします
ueda_kesuke

2020/01/06 10:56

ありがとうございます。今回、少し誤解が生じてしまう部分が多かったにも関わらず親身に根気よくアドバイスいただき色々と勉強になりました。 もう一度作り直してみることにします。 本当に今回はお世話になりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問