非同期通信でいいね機能を実装

Question

前提・実現したいこと

ruby on railsで写真を投稿してクイズを出すサービスを実装しているのですが、そこで回答一覧ページの中から正解の回答にいいねを非同期通信(ajax)で実装したいのですがうまくいきません。

いいね機能自体は問題なくできるのですが、いいねボタンを押しても表示が切り替わらずページをリロードすると表示が切り替わります。

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

ActionView::Template::Error (undefined local variable or method `answer' for #<#<Class:0x00007f390c140fe0>:0x00007f390c04f870>):
    1: $(".answer_<%= answer.id %>").html("<%= escape_javascript(render 'likes/like_button', answer: answer ) %>")
  
app/views/likes/create.js.erb:1:in `_app_views_likes_create_js_erb___364640317277991853_69941495908440'

該当のソースコード

routes.rb

Rails.application.routes.draw do
  
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root to: 'toppages#index'
  
  get 'login', to: 'sessions#new'
  post 'login', to: 'sessions#create'
  delete 'logout', to: 'sessions#destroy'
  
  get 'signup', to: 'users#new'
  resources :photos do
    resources :answers, only: [:create, :new]
  end
  
  resources :users, only: [:index, :show, :create] do
    member do
      get :best_answers
    end
  end
  resources :likes, only: [:create, :destroy]
  
end

likes_controller.rb

class LikesController < ApplicationController
  def create
   answer = Answer.find(params[:answer_id])
   current_user.like(answer)
   flash[:success] = 'いいね'
  end

  def destroy
    answer = Answer.find(params[:answer_id])
    current_user.unlike(answer)
    flash[:success] = 'いいね解除'
  end
  
end

クイズに対する回答一覧ページ

photos/show.html.erb

<p id="notice"><%= notice %></p>
<div class="row">
  <div class="offset-md-3 col-md-5">
    <p>
      <%= image_tag @photo.image.url if @photo.image? %>
    </p>
    <p>
      <strong>クイズの問題:</strong>
      <%= @photo.content %>
    </p>
    
      <%= link_to "回答する", new_photo_answer_path(@photo) %>
      
      <ul class="list-unstyled">
        
        <% @answers.each do |answer| %>
       
            <div class="media-body">
              <div style="border: solid 1px #000; margin-bottom: 8px;">
                <div class="user-name">
                  ユーザ名:<%= answer.user.name %>  <div id="answer_<%= answer.id %>" style="float: right;"><%= render 'likes/like_button', answer: answer %></div>
                </div>
                <div>
                  <%= answer.content %>
                </div>
              </div>
            </div>
          </li>
        <% end %>
      </ul>
      <%= paginate @answers %>
    </div>
</div>

<%= link_to '戻る', photos_path %> |
<%= link_to '編集', edit_photo_path(@photo) %> 

likeボタンの部分テンプレート

likes/_like_button.html.erb

<% if current_user.best_answers?(answer) %>
    <%= form_with(model: current_user.likes.find_by(answer_id: answer.id), remote: true,  method: :delete) do |f| %>
     <%= hidden_field_tag :answer_id, answer.id %>
     <%= f.submit 'いいね解除', class: 'btn btn-primary d-inline' %>
    <% end %>
<% else %>
    <%= form_with(model: current_user.likes.build, remote: true) do |f| %>
      <%= hidden_field_tag :answer_id, answer.id %>
      <%= f.submit 'いいね', class: 'btn btn-primary d-inline' %>
    <% end %>
<% end %>

create.js.erb


$(".answer_<%= answer.id %>").html("<%= escape_javascript(render 'likes/like_button', answer: answer ) %>")

destroy.js.erb

$(".answer_<%= answer.id %>").html("<%= escape_javascript(render 'likes/like_button', answer: answer ) %>")

試したこと

エラーメッセージを見ておそらくrenderの時にうまく値が渡ってないのが原因と思い見直してみたのですがうまくいきません。

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

ruby 2.5.3
rails 5.2.5

足りないコードがあれば載せます。ご教授お願いします。

Answer 1

asmさんと意見が同じで、インスタンス変数にしてあげれば動くと思います
全て理解はしていないので想像ですが、

  def create
   @answer = Answer.find(params[:answer_id])
   current_user.like(answer)
   flash[:success] = 'いいね'
  end

  def destroy
    @answer = Answer.find(params[:answer_id])
    current_user.unlike(answer)
    flash[:success] = 'いいね解除'
  end

$(".answer_<%= @answer.id %>").html("<%= j(render 'likes/like_button', answer: @answer ) %>")

で動くのかなあと思います

Answer 2

controllerからviewへの変数転送はインスタンス変数に限られます。

ローカル変数の転送はrenderを明示する事で可能ではあります

  def create
   answer = Answer.find(params[:answer_id])
   current_user.like(answer)
   flash[:success] = 'いいね'
   render locals: {answer: answer}
  end

面倒だしインスタンス変数でいいと思いますが

---

資料見つけられなかったのでうろ覚えですが
render answer: answer
だったかもしれません。
(renderとrender partial:で扱いが違うんだったかな)

Comments

[gen515]

修正したのですが表示は相変わらず変化しませんでした。