質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • Ruby

    7939questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7493questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ajax

    1115questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 167

takeke

score 38

やりたいことはいわゆるいいね機能を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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • mts10806

    2018/05/03 05:46

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

    キャンセル

  • takeke

    2018/05/16 19:49

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

    キャンセル

  • mts10806

    2018/05/17 05:36

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

    キャンセル

  • takeke

    2018/05/18 17:46

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

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Ruby

    7939questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7493questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ajax

    1115questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。