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

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

ただいまの
回答率

90.45%

  • JavaScript

    21057questions

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

  • Ruby on Rails

    9103questions

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

Ajaxでイイね!処理(rails)

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 91

tomtom1

score 22

前提・実現したいこと

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

    <div id="likes_buttons_<%= post.id %>">
    <%= render partial: 'likes/like', locals: { post: post} %>
    </div>
*_like.html.erb
      <% if Like.find_by(user_id: @current_user.id, post_id: post.id) %>
        <%= link_to("/likes/#{post.id}/destroy", method: :post, remote: true) do %>
          <span class="fa fa-heart icon-size like-btn-unlike"></span>
          <% end %>
      <% else %>
        <%= link_to("/likes/#{post.id}/create", method: :post, remote: true) do %>
        <span class="fa fa-heart icon-size like-btn"></span>
        <% end %>
      <% end %>
      <%= Like.where(post_id: post).count %>
*create.js.erb
$('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>");
*destroy.js.erb
$('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>");
class LikesController < ApplicationController
  def create
    @like = Like.new(user_id: @current_user.id, post_id: params[:post_id])
    @like.save
  end
  def destroy
    @like = Like.find_by(user_id: @current_user.id, post_id: params[:post_id])
    @like.destroy
  end
end

現状

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

application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
Sprockets::FileNotFound in Posts#index
couldn't find file 'jquery' with type 'application/javascript'

修正/追加後

application.js
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require activestorage
//= require turbolinks
//= require_tree .
gem 'jquery-rails'
gem 'jquery-ui-rails'
*post時
Started POST "/likes/3/create" for 127.0.0.1 at 2019-06-12 01:17:20 +0900
Processing by LikesController#create as JS
  Parameters: {"post_id"=>"3"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/application_controller.rb:6
   (0.1ms)  begin transaction
  ↳ app/controllers/likes_controller.rb:7
  CACHE User Load (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:7
  Post Load (0.2ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."id" = ? LIMIT ?  [["id", 3], ["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:7
  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"]]
  ↳ app/controllers/likes_controller.rb:7
   (9.2ms)  commit transaction
  ↳ app/controllers/likes_controller.rb:7
  Rendering likes/create.js.erb
  Rendered likes/create.js.erb (341.5ms)
Completed 500 Internal Server Error in 406ms (ActiveRecord: 10.0ms)

ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x00007fd4ddb6d190>:0x00007fd4e05c8db8>):
    1: $('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>");

app/views/likes/create.js.erb:1:in `_app_views_likes_create_js_erb___3843924283153595975_70276136979320'



*destory時
Started POST "/likes/3/destroy" for 127.0.0.1 at 2019-06-12 01:45:42 +0900
Processing by LikesController#destroy as JS
  Parameters: {"post_id"=>"3"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/application_controller.rb:6
  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]]
  ↳ app/controllers/likes_controller.rb:12
   (0.0ms)  begin transaction
  ↳ app/controllers/likes_controller.rb:13
  Like Destroy (0.2ms)  DELETE FROM "likes" WHERE "likes"."id" = ?  [["id", 16]]
  ↳ app/controllers/likes_controller.rb:13
   (9.3ms)  commit transaction
  ↳ app/controllers/likes_controller.rb:13
  Rendering likes/destroy.js.erb
  Rendered likes/destroy.js.erb (344.0ms)
Completed 500 Internal Server Error in 401ms (ActiveRecord: 9.9ms)



ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x00007fd4ddb6d190>:0x00007fd4e100c900>):
    1: $('#likes_buttons_<%= post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: post}) %>");

app/views/likes/destroy.js.erb:1:in `_app_views_likes_destroy_js_erb___3195171927017731297_70276142362720'
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

destroyの

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/11 23:42

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

    キャンセル

  • 2019/06/11 23:47

    あと怪しいのはこちらですね。

    //= require jquery
    これが動いていないのが問題になっていそうです。

    https://teratail.com/questions/76543
    これなども参考にして見るといいかもしれないです。

    キャンセル

  • 2019/06/12 00:17

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

    キャンセル

  • 2019/06/12 00:49

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

    キャンセル

  • 2019/06/12 01:24

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

    キャンセル

  • 2019/06/12 01:27 編集

    ん、
    destroyなのに、
    `/likes/3/create` createが呼ばれていますね。

    あと気になるのは、postという変数がundefinedという点ですね。

    キャンセル

  • 2019/06/12 01:52 編集

    申し訳ありません。その点についてはコピペミスでした!
    修正致しました。

    postという変数がundefinedの点..
    locals: { post: post}も敢えてlocals: { post: @post}とかでトライしてみたのですが、
    エラーが出てしまい、全くわからずにいます。

    キャンセル

  • 2019/06/12 01:54

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

    キャンセル

  • 2019/06/12 02:43

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

    キャンセル

  • 2019/06/12 15:27 編集

    エラー: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のことでした。

    キャンセル

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

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21057questions

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

  • Ruby on Rails

    9103questions

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