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

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

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

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

jQuery

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

Q&A

解決済

1回答

1610閲覧

(Rails)いいね機能 非同期通信が反映されない

nosa

総合スコア1

Ruby on Rails

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

jQuery

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

0グッド

0クリップ

投稿2020/05/11 10:50

編集2020/05/12 00:28

Rails歴一ヶ月の初心者です。
いいね機能を非同期通信で実装しようと、以下の記事を見ながら実装してみましたが、
リロードをしないと反映されない状態になっています。(つまり、jQueryが反映されません。)

リロードすると正常に動くきますので、モデルやアソシエーション、コントローラー
は正常に動いていると仮定しています。

大変お手数をおかけしますが、教えていただけると幸いです。

#####likes.controller.rb

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

#####(いいね機能を実装したいビュー)必要箇所のみ抜粋

.element#like{data: {like: {id: @post.id}}} = render "like"

#####like.html.haml(上のコードのrender先)

- if Like.find_by(user_id: current_user.id, post_id: @post.id) = link_to "/posts/#{@post.id}/likes/#{@post.likes.ids}", method: :delete, class: "element", remote: true do = icon("fas", "heart", class: "like") - else = link_to "/posts/#{@post.id}/likes", method: :post, class: "element", remote: true do = icon("fas", "heart", class: "unlike") .count = @post.likes.length

#####views/likes/create.js.erb

$("#like-<%= @post.id %>").html("<%= j(render 'posts/like') %>");

#####views/likes/destroy.js.erb

$("#like-<%= @post.id %>").html("<%= j(render 'posts/like') %>");

参考にしたサイト

https://qiita.com/fumikao/items/373caa60b77f27f2dbdd

バージョン

rails (5.0.7.2)
jquery-rails (4.3.5)

検証

・現在、chromeの検証機能で確認をしてもエラーが発生していない状態
・ターミナルのrails sで出てくる情報にもエラーが出ていない状態
・create.js.erbをわざと間違えで記載するとエラーが発生することから、jsに「反映されていない」ではなく「記載に誤りがない」と考えられる。
・turbolinks関連の記載は削除済

仮説(5/12追加)

create.js.erbの記載の前(一番最初の行)をdebuggerで検証すると、

$("#like-1").html("<div class=\'icon_count\'>\n<a data-remote=\"true\" rel=\"nofollow\" data-method=\"delete\" href=\"/posts/1/likes/[56]\"><i class=\"fas fa-heart like\"></i>\n</a></div>\n");

このような記載が表示されます。
しっかり値が送られてきているので、やはり記載に誤りは無いかと思うのですが、

rel="nofollow" の部分がどうにも気になります。

もし、ajaxが発火しない理由がわかる方がいらっしゃいましたら、教えてください。

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

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

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

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

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

winterboum

2020/05/11 12:02

turbolinks をkeyに検索してみてください
nosa

2020/05/11 12:49

winterboum様ありがとうございます。 turbolinks をフォルダ内検索し、2件コメントアウトで残っているものがありましたの削除しました。 その後、bundle updateを実施しましたが、状況は変わりませんでした。
winterboum

2020/05/11 12:53

いえ、googleあたりで、です。 沢山出てきます。
nosa

2020/05/11 13:16

調べて無効化の確認をしましたが、既に作業しているもので合っていそうでした…
guest

回答1

0

自己解決

解決しました。

カスタムデータ属性の書き方を変えたら動きました。

(×)#like{data: {like: {id: @post.id}}}
(○)#like{ id: @post.id }

投稿2020/05/12 07:26

nosa

総合スコア1

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問