0

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

1 件の回答 1

1

他にも問題はあるかもしれませんがエラーに関しては

<%# @products.each do |product| %>

でコメントアウトしてしまってるので

<% @products.each do |product| %>

とコメントを外してください。

1
  • 回答ありがとうございます!_favorite.html.erbでeachを使うとお気に入りボタンが1箇所にたくさん出てきてしまい、うまくできませんでした。 そこで追記で書いたようにjs.erb内で記述のある戻り表示の部分テンプレート(_index.html.erb)指定、そこに同じeach記述したのですが、今度は上記追記の挙動と逆の動きになりました。先頭のproductのみcreateがAjax非対応でdestroyがAjax対応といった具合です。 引数の問題のような気がしてきているのですが、favorites_controllerで各アクションの際に@〜に何か代入してやり、その@〜をjs.erbで記述というのはどうでしょうか? こちらいくつか試してみたのですが知識が乏しいのでうまくいくような記述は思いつきませんでした
    – take
    Commented 2018年5月21日 8:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。