Ajax対応の記述
ecサイト作成していて、Ajax対応がなかなか思うように行かないので質問させていただきます。
お気に入り機能のボタンをつけて、お気に入りしてあるか、否かの表示を切り替える際にAjaxお使いたいのですが、現在remote:true とjs.htmlファイル、部分テンプレ作成してやっているのですが,お気に入りに追加や解除しても画面が何も変わらず、ターミナルではエラー表示。そして画面更新するとボタンを押したことになっているといった具合です。
表示の仕方ですが、レイアウトページで縦3カラムにしてありまして、両サイドをレイアウトで記述、真ん中をyieldでいろんなページに変えているといった感じです。
renderで表示している_store.html.erbにはremote:true が2種類ありまして、1つはカートに追加するボタンで、もう一つがお気にいりボタンです。カートについてはレイアウトページで右のカラムに常に表示してあり、こちらはajaxがうまくいっております。
エラー該当箇所ですが、remote:trueをなくすと通常の動きはします。が毎回ルートページに遷移してしまうのでやはりajaxに対応させたいと思っています。
対処の仕方がわからないのでもし何かお気付きの方いましたらアドバイスや指摘など宜しくお願いしします.
ターミナルでのエラー内容
ActionView::Template::Error (undefined local variable or method `product' for #<#<Class:0x0bacf034>:0x0d5c4600>):
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_107084170'
app/views/favorites/create.js.erb:1:in `_app_views_favorites_create_js_erb___327707278_112076230'
#view/store/index.html.erb
<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>
#view/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_controller.rb
class FavoritesController < ApplicationController
before_action :authenticate
def create
@product = Product.find(params[:product_id])
@favorite = current_user.favorites.build(product: @product)
@products = Product.paginate(:page => params[:page], :per_page => 12
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
@products = Product.paginate(:page => params[:page], :per_page => 12
@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
format.json{head :ok}
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
#favorites/create.js.erb
$('#favjs').html("<%=j render 'favorites/favorite' %>");
#favorites/destroy.js.erb
$('#favjs').html("<%=j render 'favorites/favorite' %>");
追記
js.erbファイル両方共に、$('#favjs').html("<%=j render 'favorites/index', product: @product %>");という風にproduct: @productを追加し、
render先を新しいファイルにしました。
favorites/_index.html.erb(中身は_favoriteのremote:trueを消しただけ)
するとeachで出力されてるproductの最初のものだけcreateがAjax対応になりました。他のproductのcreateボタン押しても最初のproductのcreateが動いてしまうのでダメなんですが。 destroyアクションはAjax非対応の挙動をしています。
参考になれば嬉しいです。引き続きこちらの質問宜しくお願いしますm(._.)m