RailsでAjaxでいいね機能

Question

概要

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が読み込まれていない・・？

Answer 1

このようにしたらいけた。 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

長い戦いたっだ。。。