each使用して Ajax対応させるための記述方法

Question

やりたいことはいわゆるいいね機能をAjaxでの導入です。Ajax未使用でのいいね機能は導入済みであります。

記述内にeachで表示していて、eachの中をrenderで部分テンプレートに移動、そこでAjax対応したい箇所を用意してあるのですが、そこのエラーがなかなか取れなくて困っています。

一度each使用している部分ごとrenderにしてみたところ、Ajax対応が成功しました。が、他のページでもこのAjax対応を使いたいのでeachの中の一部分をrenderにしてAjax対応したいという次第です。

現在Ajax非対応の記述ではうまく動作しており、Ajax対応させると、①remote: true→②コントローラアクション→③アクション.js.erb→④render先の部分テンプレートと移動しており、④の際にテンプレートエラーが出てきます。この時ですが、①と④は同じファイルを使用しております。
疑問ですが、①は通るのですが、④は通らないのがよくわかりません

また、意味はないと思いますが、④で別のファイル（①の remote:trueの記述だけ除いたもの）を用意してみたのですがダメでした。

恐らくコントローラーかjs.erbの記述がよくないと思うのですが正しい書方がわかりません。そこで、何かお気付きになられたことや解決方法など教えていただけると幸いです。

以下ファイル載せます。

store/index.html.erb←ここがルートページになります。application.htmlでレイアウト作り、その一部を<%= yield %>で表示しております。

<div>
<% @products.each do |product| %>
<table>	
	<tbody>
		<tr>
			<td>
				<div id="favjs" class="store_button">
					
			        <%= render 'favorites/favorite',product: product %>

				</div>				
			</td>
		</tr>
	</tbody>
</table>
<% end %>
</div>

favorites/_favorite.html.erb ←用意した部分テンプレート

<% unless session[:user_id].nil? %>
	<% if product.favorited_by? current_user %>
          <%= link_to image_tag('no_fav.png', :size => "83x30"), product_favorites_path(product), remote: true ,method: :delete %>
    <% else %>
          <%= link_to image_tag('add_fav.png', :size => "83x30"), product_favorites_path(product), remote: true ,method: :post %>
    <% end %>
<% end %>

favorites/create.js.erbとdestroy.js.erb

$('#favjs').html("<%=j render 'favorites/favorite' %>");

今起こってるエラー

ActionView::Template::Error (undefined local variable or method `product' for #<#<Class:0x0bacf034>:0x0a69c238>):
    1: <%# @products.each do |product| %>
    2: 	<% unless session[:user_id].nil? %>
    3: 		<% if product.favorited_by? current_user %>
    4: 	          <%= link_to image_tag('no_fav.png', :size => "83x30"), product_favorites_path(product) ,remote: true,method: :delete %>
    5: 	    <% else %>
    6: 	          <%= link_to image_tag('add_fav.png', :size => "83x30"), product_favorites_path(product),remote: true,method: :post %>
  
app/views/favorites/_favorite.html.erb:3:in `_app_views_favorites__favorite_html_erb__914006175_87697530'
app/views/favorites/create.js.erb:1:in `_app_views_favorites_create_js_erb___327707278_87357230'

favorites_controller.rb

class FavoritesController < ApplicationController
	before_action :authenticate

	def create
        @products = Product.paginate(:page => params[:page], :per_page => 12)
		@product = Product.find(params[:product_id])
		@favorite = current_user.favorites.build(product: @product)

		respond_to do |format|
			if @favorite.save
				format.html{redirect_to store_path, notice: "お気に入りに登録しました"}
				format.js
				format.json{head :ok}			
			else
				format.html{redirect_to store_path, notice:"この商品はお気に入りに登録できません"}
			end
		end
	end

	def destroy
		@favorite = current_user.favorites.find_by!(product_id: params[:product_id])
		@favorite.destroy

		respond_to do |format|
			format.html{redirect_to store_path, notice:"お気に入りを解除しました"}
			format.js
        end 
	end
end

store_controller.rb

class StoreController < ApplicationController

	def index
	  	@cart = current_cart
	  	@categories = Category.all
	  	@user = current_user
	  	@products = Product.paginate(:page => params[:page], :per_page => 12)

	  	if params[:title].present?
	  	    @products = @products.get_by_name params[:title]
	    end
	end
end

以上です何かアドバイス等いただけると非常に助かります。よろしくお願いいたします。

Comments

[m.ts10806]

前回質問の質問内容を編集していただければ良かったのですが・・・。

[takeke]

度々すみません。新しい参考データが増えたので字数が全て載せきれませんでした。これからまた再挑戦します。変化があればこの記事の内容編集しようと思います。

[m.ts10806]

未解決の質問が多く残ったまま・同様の質問が次々と立てられる　回答がつきにくくなる２大条件です。回答がつかないのは質問内容に問題があることが殆どです。お気を付けを。

[takeke]

申し訳ないです。記事いくつか編集しましたのでよろしければご覧くださいm(._.)m

Answer 1

favorites/create.js.erbとdestroy.js.erb

$('#favjs').html("<%=j render 'favorites/favorite' %>");

ここでパーシャルを呼び出しているようですが、パーシャルビューに必要な product 変数に値が入っていない状況です。

$('#favjs').html("<%=j render 'favorites/favorite',product: 値（@productなど） %>");

のように必要な値を渡してあげましょう。値はコントローラ（create/destroy）でインスタンス変数として用意して渡します。 @producなど。