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

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

ただいまの
回答率

89.86%

Ajaxでイイね!処理(rails)

受付中

回答 1

投稿 編集

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

tomtom1

score 80

前提・実現したいこと

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/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で質問しよう!

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