

ecサイト作成していて、Ajax対応がなかなか思うように行かないので質問させていただきます。

お気に入り機能のボタンをつけて、お気に入りしてあるか、否かの表示を切り替える際にAjaxお使いたいのですが、現在remote:true
とjs.htmlファイル、部分テンプレ作成してやっているのですが,お気に入りに追加や解除しても画面が何も変わらず、ターミナルではエラー表示。そして画面更新するとボタンを押したことになっているといった具合です。

表示の仕方ですが、レイアウトページで縦３カラムにしてありまして、両サイドをレイアウトで記述、真ん中をyieldでいろんなページに変えているといった感じです。

renderで表示している_store.html.erbにはremote:true
が２種類ありまして、１つはカートに追加するボタンで、もう一つがお気にいりボタンです。カートについてはレイアウトページで右のカラムに常に表示してあり、こちらはajaxがうまくいっております。  
エラー該当箇所ですが、remote:trueをなくすと通常の動きはします。が毎回ルートページに遷移してしまうのでやはりajaxに対応させたいと思っています。

対処の仕方がわからないのでもし何かお気付きの方いましたらアドバイスや指摘など宜しくお願いしします.

# ターミナルでのエラー内容

[code]

    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'
    
[/code]

＃view/store/index.html.erb

[code]

    <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>
    
[/code]

＃view/favorites/_favorite.html.erb

[code]

                <% 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 %>
                
    
[/code]

＃favorites_controller.rb

[code]

        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
    
[/code]

＃store_controller.rb

[code]

    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
    
[/code]

＃favorites/create.js.erb

[code]

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

＃favorites/destroy.js.erb

[code]

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

追記

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


CC BY-SA 4.0
2018-05-18T06:02:06.003
44059
2019-12-25T09:01:45.227
2020-06-17T08:14:45.997
-1
27359
question
javascript ruby-on-rails ruby ajax
Ajax対応の記述


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

[code]

    <%# @products.each do |product| %>
    
[/code]

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

[code]

    <% @products.each do |product| %>
    
[/code]

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


CC BY-SA 4.0
2018-05-19T23:50:15.350
44092
2018-05-19T23:50:15.350
3271
44059
answer