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

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

ただいまの
回答率

88.32%

非同期でのいいね機能の実装

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,726

yamamoto11081

score 16

前提・実現したいこと

twitterのようないいね機能を非同期で実装したい。
ハートボタンの色を変更し、カウントにも反映させる。

発生している問題・エラーメッセージ

いいねボタンを押すと中間テーブルlikesにデータは保存されるものの、
非同期ではビューに反映しない。reloadするとビューに反映する。

該当のソースコード

user.rb

class User < ApplicationRecord
  has_many :posts
  has_many :like_posts, through: :likes, source: :post
  has_many :likes, dependent: :destroy
end
post.rb

class Post < ApplicationRecord
  belongs_to :user
  has_many :like_users, through: :likes, source: :user
  has_many :likes, dependent: :destroy
end
like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :post, counter_cache: :likes_count
  validates :user_id, presence: true
  validates :post_id, presence: true
end
routes.rb

Rails.application.routes.draw do
  post "/like/:post_id" => "likes#like", as: 'like'
  delete "/like/:post_id" => "likes#unlike", as: 'unlike'
end
likes_controller.rb

class LikesController < ApplicationController
  before_action :authenticate_user!
  before_action :set_variables

  def like
    like = current_user.likes.new(post_id: @post.id)
    like.save
  end

  def unlike
    like = current_user.likes.find_by(post_id: @post.id)
    like.destroy
  end

  private

  def set_variables
    @post = Post.find(params[:post_id])
    @id_name = "#like-link-#{@post.id}"
  end
end
posts/index.html.haml

=render partial: "posts/post", collection: @posts
posts/_post.html.haml

= render 'likes/like', post: post
likes/_like.html.haml

.like-link{:id => "like-link-#{post.id}"}
  - if current_user.likes.find_by(post_id: post.id)
    = link_to unlike_path(post.id), method: :delete, remote: true do
      .iine__button
        ❤️#{post.likes.count}
  - else
    = link_to like_path(post.id), method: :post, remote: true do
      .iine__button
        ♡️#{post.likes.count}
likes/like.js.erb

$("<%= @id_name %>").html('<%= j(render("likes/like", post: @post )) %>');
likes/unlike.js.erb

$("<%= @id_name %>").html('<%= j(render("likes/like", post: @post )) %>');

試したこと

Qiitaの以下記事を参照し実装。
https://qiita.com/hayabusa3703/items/2b916e652a1dc85bb6e3

最初はjsファイルもhamlで作成したが、非同期できずerbに変更。
しかしerbに変更後も非同期では実装できず。
記事の通りjsを下記のようにしてもダメでした。

$("<%= @id_name %>").html('<%= escape_javascript(render("likes/like", post: @post )) %>');

補足情報(FW/ツールのバージョンなど)

ruby 2.3.1
Rails 5.2.3

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

DBに登録すると同時に、HTML画面も書き換えてやらないと片手落ちです
もちろんめど臭ければリロードしてもよいとは思いますが
それでは非同期で処理する意味がないですからね

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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