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

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

ただいまの
回答率

90.36%

  • Ruby on Rails 5

    2130questions

  • Ajax

    1149questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

RailsでAjaxでいいね機能

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 244

hrmths

score 11

 概要

https://teratail.com/questions/88802

こちらの方と同様、railsとjsを使ったお手軽「いいね♡機能」 を参考にしながら、コメントにいいね機能(comment_like)を作っています。

こちらも参考にさせて頂きながら実装したのですが、リロードしないといいねが更新されず困っています。どなたかアドバイスいただけますでしょうか?

環境は、以下の通りです。

  • Ruby 2.3.0
  • Rails 5.0.6

 ソースコード

_comment_like.html.erb

<% if user_signed_in? %>
  <% if current_user.comment_liking?(comment) %>
    <%= button_to comment_comment_like_path(comment, comment_id: comment.id), method: :delete, id: "comment-like-button", remote: true do %>
      <%= content_tag :span, "", class: "glyphicon glyphicon-heart" %>
      <span>
        <%= comment.comment_likes_count %>
      </span>
    <% end %>
  <% else %>
    <%= button_to comment_comment_likes_path(comment), id: "comment-like-button", remote: true do %>
      <%= content_tag :span, "", class: "glyphicon glyphicon-heart-empty" %>
      <span>
        <%= comment.comment_likes_count %>
      </span>
    <% end %>
  <% end %>
<% else %>
  <%= content_tag :span, "", class: "glyphicon glyphicon-heart-empty" %>
    <span>
      <%= comment.comment_likes_count %>
    </span>
<% end %>

create.js.erb

$("#comment-like-<%= @comment.id %>").html("<%= render 'comment_like', comment: @comment, comment_like: @comment_like %>");

destroy.js.erb

$("#comment-like-<%= @comment.id %>").html("<%= render 'comment_like',comment: @comment %>");

comment_likes_controller.erb

class CommentLikesController < ApplicationController
  before_action :require_user_logged_in
  before_action :set_comment

  def create
    @comment_like = CommentLike.create(user_id: current_user.id, comment_id: params[:comment_id])
  end

  def destroy
    comment_like = CommentLike.find_by(user_id: current_user.id, comment_id: params[:comment_id])
    comment_like.destroy
  end

  private

  def set_comment
    @comment = Comment.find(params[:comment_id])
  end
end

application.html.erb

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  crossorigin="anonymous">
    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrapを利用しており、application.html.erbも関係しそうな部分だけ記載させていただきます。

よろしくお願いいたします。

--4/29追記--

サーバーログは特にエラーは吐いていない。

Started POST "/comments/9/comment_likes" for 10.240.1.50 at 2018-04-29 09:57:05 +0000
Cannot render console from 10.240.1.50! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by CommentLikesController#create as JS
  Parameters: {"authenticity_token"=>"sample_token_hogehoge", "comment_id"=>"9"}
  User Load (0.6ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
  Comment Load (0.8ms)  SELECT  `comments`.* FROM `comments` WHERE `comments`.`id` = 9 LIMIT 1
   (0.3ms)  BEGIN
  User Load (0.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
  Comment Load (62.8ms)  SELECT  `comments`.* FROM `comments` WHERE `comments`.`id` = 9 LIMIT 1
  SQL (12.0ms)  INSERT INTO `comment_likes` (`user_id`, `comment_id`, `created_at`, `updated_at`) VALUES (1, 9, '2018-04-29 09:57:05', '2018-04-29 09:57:05')
  SQL (0.7ms)  UPDATE `comments` SET `comment_likes_count` = COALESCE(`comment_likes_count`, 0) + 1 WHERE `comments`.`id` = 9
   (8.2ms)  COMMIT
  Rendering comment_likes/create.js.erb
  Comment Exists (0.7ms)  SELECT  1 AS one FROM `comments` INNER JOIN `comment_likes` ON `comments`.`id` = `comment_likes`.`comment_id` WHERE `comment_likes`.`user_id` = 1 AND `comments`.`id` = 9 LIMIT 1
  Rendered comment_likes/_comment_like.html.erb (6.4ms)
  Rendered comment_likes/create.js.erb (13.4ms)
Completed 200 OK in 146ms (Views: 23.1ms | ActiveRecord: 87.7ms)

--5/1追記--
create.js.erbに console.log("hello"); と記述してもサーバーログになにも表示されない。create.js.erbが読み込まれていない・・?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

このようにしたらいけた。 escape_javascript の記述がなかったことが原因のよう。

create.js.erb

$("#comment-like-<%= @comment.id %>").html("<%= escape_javascript(render 'comment_like', comment: @comment, comment_like: @comment_like) %>");

delete.js.erb

$("#comment-like-<%= @comment.id %>").html("<%= escape_javascript(render 'comment_like',comment: @comment) %>");

また、元々の実装だとカウント数にずれがでたので、 @comment.reload を追記したら解決した。

comment_likes.controller.erb

class CommentLikesController < ApplicationController
  before_action :require_user_logged_in
  before_action :set_comment

  def create
    unless current_user.comment_liking?(@comment)
      @comment_like = CommentLike.create(user_id: current_user.id, comment_id: params[:comment_id])
      @comment.reload
    end
  end

  def destroy
    comment_like = CommentLike.find_by(user_id: current_user.id, comment_id: params[:comment_id])
    if current_user.comment_liking?(@comment)
      comment_like.destroy
      @comment.reload
    end
  end

  private

  def set_comment
    @comment = Comment.find(params[:comment_id])
  end
end

長い戦いたっだ。。。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • Ruby on Rails 5

    2130questions

  • Ajax

    1149questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。