RailsでAjaxを使って「お気に入り機能」を付けたがうまく動かない

Question

前提・実現したいこと

ある施設の検索サイトを作っています。
施設詳細ページで「お気に入り登録をする」「お気に入りを外す」をAjaxを使って動かしたいと思いました。

参考にした情報
https://qiita.com/naberina/items/c6b5c8d7756cb882fb20

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

Ajaxを実装しているつもりなのですが、、
リロードしないと登録済み・登録削除済の状態を表示できないでおります。

該当のソースコード

リロードすると実行できているので、
おそらくコントローラーやviewの問題出なく、jsの処理で何かが漏れているのだと思うのですが、
自分で原因を見つけられずにおります。原因の想定がつくかたがいらっしゃれば、アドバイスいただけないでしょうかm_ _m

<show.html.erb>

<table>
    <tbody>
        <tr>
            <th>施設名</th>
            <td><%= @nursery.title %></td>
        </tr>
         <tr>
            <th>住所</th>
            <td><%= @nursery.address %></td>
        </tr>
    </tbody>
</table>
<div id="like_button_<%= @nursery.id %>">
<%= render partial: "like", :locals => { nursery: @nursery }%>
</div>

<_like.html.erb>

<% if user_signed_in? %>
      <% like = current_user.likes.find_by(nursery_id: nursery.id) %>
      <% if like.present? %>
         <%= link_to("/nurseries/#{nursery.id}/likes/#{like.id}", method: :delete, id: "like-button", remote: true) do %>
         <i class="fa fa-minus unlike-btn">お気に入りから外す</i><br>
         <% end %>
      <% else %>
        <%= link_to("/nurseries/#{nursery.id}/likes", method: :post, id: "like-button", remote: true) do %>
        <i class="fa fa-star like-btn">お気に入り登録</i><br>
        <% end %>
      <% end %>
    <% else %>
        <i class="fa fa-star like-btn">お気に入り登録</i><br>
    <% end %>

<nurseries_controller>

  def show
    @nursery = Nursery.find(params[:id])
  end

<likes_controller>

 def create
    @like = Like.new(user_id:current_user.id, nursery_id:params[:nurseries_id])
    @like.save
  end
  
  def destroy
    @like = Like.find_by(user_id:current_user.id ,nursery_id:params[:nurseries_id])
    @like.destroy
  end

<create.js.erb>

$('#like_button_<%= @nursery.id %>').html("<%= j(render partial: 'like', locals: {nursery: @nursery}) %>");

<destroy.js.erb>

$('#like_button_<%= @nursery.id %>').html("<%= j(render partial: 'like', locals: {nursery: @nursery}) %>");

<application.js>

//= require underscore
//= require gmaps/google
//= require jquery
//= require jquery_ujs
//= require_tree .

補足情報

gem 'jquery-rails'
のbundle installは完了しています。

ajaxが動かなかったページで検証画面を開くとエラー内容が確認できましたので、
添付もいたします。自分では色々検索しても読み解けませんでした。。

Answer 1

コメントと重複しますが、以下の通りです。

以下を参照し対応。
https://teratail.com/questions/52657
その後も以下のエラーが出ておりましたが、
ActionView::Template::Error (Missing partial likes/_like, application/_like with {:locale=>[:en], :formats=>[:js, "application/ecmascript", "application/x-ecmascript",
結果的に_like.html.erbをviews/likesフォルダ下ではなく、view/nurseriesフォルダ下に置いていたことに気づき、解消されました。

ご回答いただいたh_daidoさん、誠にありがとうございました。
解決できたのはh_daidoさんが上記urlの質問でご回答されていた内容のおかげです。

Answer 2

likes_controller.rbで@nurseryはセットされてますかね？
例えばこんなかんじです。

  def create
    @nursery = Nursery.find(params[:nurseries_id])
    @like = Like.new(user_id:current_user.id, nursery_id:)
    @like.save
  end

  def destroy
    @nursery = Nursery.find(params[:nurseries_id])
    @like = Like.find_by(user_id:current_user.id ,nursery_id:params[:nurseries_id])
    @like.destroy
  end

controllerのbefore_actionでセットしているかもしれませんが...（そのほうが実装としてはDRYになってベターです）

Comments

[NN77]

ありがとうございますm_ _m
@nurseryはshow.html.erbの以下のコードで引き継いでいるのです。
<%= render partial: "like", :locals => { nursery: @nursery }%>

like_controllerにも教えていただいたように記載して見ましたが、やはりajaxは動かぬままでございます。

[h_daido]

create.js.erbやdestroy.js.erbは、createやdestroyから呼ばれるので、showからの引き継ぎは関係ない気がしますよ。
でも、どちらにしても、記載しても動かないということは、別の問題かもしれませんね。
chrom developerコンソールのnetworkタブの使い方はわかります？
Ajaxのリクエストがあるはずなので、その中のResponse覗いたほうが早いかもしれないですね。

[NN77]

そうなんですね。教えていただきありがとうございます。
chrome developerコンソールのnetworkタブを見てみたところ、
Failed to load resource: the server responded with a status of 500 ()
と出ていました。

[NN77]

こちら自己解決いたしました。
以下を参照し、
https://teratail.com/questions/52657
その後も以下のエラーが出ておりましたが、
ActionView::Template::Error (Missing partial likes/_like, application/_like with {:locale=>[:en], :formats=>[:js, "application/ecmascript", "application/x-ecmascript",
結果的に_like.html.erbをviews/likesフォルダ下ではなく、view/nurseriesフォルダ下に置いていたことに気づき、解消されました。

ご回答いただいたh_daidoさん、誠にありがとうございました。
解決できたのはh_daidoさんが上記urlの質問でご回答されていた内容のおかげです。

[h_daido]

解決できてよかったですね！

[NN77]

ありがとうございます。ご回答いただけて非常に心強かったです！