コントローラーがAjaxに応答しない

Question

私のアプリケーションのホームページでは、テニスプレーヤーのコレクション（@atp_ranks）を繰り返し、各テニスプレーヤーについて、自分の属性と現在のユーザーが参加できるようにするボタンを使ってテーブル行を作成しますそのテニス選手：

<table> 
    <thead> 
    <tr> 
     <th> Rank </th> 
     <th> Player </th> 
     <th> Points </th> 
     <th id="atp_count" class="tennis_stats"> <%= current_user.atp_ranks.count %> selected </th> 
    </tr> 
    </thead> 
    <tbody> 
    <% @atp_ranks.each do |tennis_player| %> 
     <tr id="tennist-<%= tennis_player.ranking %>"> 
     <td class="atpranking"> <%= tennis_player.ranking %> </td> 
     <td class="atpname"> <%= tennis_player.name %> </td> 
     <td class="atppoints"> <%= tennis_player.points %> </td> 
     <% unless Time.now.month == 12 %> 
      <td> 
      <div id="atpenlist_form_<%= tennis_player.id %>"> 
       <% if current_user.atpenlisted?(tennis_player) %> 
       <%= form_for(current_user.atp_selections.find_by(atp_rank_id: tennis_player.id), html: { method: :delete }, remote: true) do |f| %> 
        <%= f.submit "Dump", class: "btn btn-warning btn-sm" %> 
       <% end %> 
       <% else %> 
       <%= form_for(current_user.atp_selections.build, remote: true) do |f| %> 
        <div><%= hidden_field_tag :atp_id, tennis_player.id %></div> 
            <%= f.submit "Choose", class: "btn btn-primary btn-sm" %> 
       <% end %> 
       <% end %> 
      </div> 
      </td> 
     <% end %> 
     </tr> 
    <% end %> 
    </tbody> 
</table> 

ユーザーがすぐにフォームを送信した結果を見る機会を与えるために、私は、各フォームでremote: trueを追加し、app/views/atp_selectionsでパーシャルとしてこれらのフォームを保存しました。

次に、上記のディレクトリにcreate.js.erbとdestroy.js.erbというファイルを作成しました。

$("#atp_count").html('<%= current_user.atp_ranks.count %> selected'); 
$("#atpenlist_form_<%= @tennist.id %>").html("<%= escape_javascript(render('atp_selections/atpdiscard')) %>"); 

jQueryのコードはatp_count idと第四thタグのID、およびボタンのフォームを含むdivのIDですatpenlist_form_<%= @tennist.id %> IDを、操作する必要があります。以下はcreate.js.erbファイルの内容です。以下は

完全にそれを報告するには長すぎる私のatp_selectionsコントローラの抽出物である：あなたが見ることができるように、atp_selectionsコントローラの作成アクションが複数で構成されて

def create 
    @tennist = AtpRank.find(params[:atp_id]) 
    rankings = current_user.atp_ranks.pluck(:ranking) 
    atp_selections = current_user.atp_selections 
    wta_selections = current_user.wta_selections 
    if atp_selections.count <= 15 && wta_selections.count < 16 
     if (1..5).include?(@tennist.ranking) && (rankings & (1..5).to_a).size == 0 
     current_user.atpenlist(@tennist) 
     respond_to do |format| 
      format.html { redirect_to root_url } 
      format.js 
     end 
     elsif (6..15).include?(@tennist.ranking) && (rankings & (6..15).to_a).size < 3 
     current_user.atpenlist(@tennist) 
     respond_to do |format| 
      format.html { redirect_to root_url } 
      format.js 
     end 
     ... 

のif-elseステートメントこと募集規則に応えます。しかし、ここで重要なことは、各条件で、Ajaxで処理されるリクエストのために、respond_toメソッドで必要なコードを含めることでした。

コントローラはAjaxに応答せず、atp_countとatpenlist_form_<%= @tennist.id %>への変更はページの更新後にのみ表示されます。

レールコンソールには、次のエラーを報告します。

Rendered atp_selections/create.js.erb (223.6ms) 
Completed 500 Internal Server Error in 695ms (ActiveRecord: 83.2ms) 

ActionView::Template::Error (undefined local variable or method `tennis_player' for #<#<Class:0x00000005948748>:0x0000000593f648>): 
    1: <%= form_for(current_user.atp_selections.find_by(atp_rank_id: tennis_player.id), 
    2:    html: { method: :delete }, remote: true) do |f| %> 
    3: <%= f.submit "Dump", class: "btn btn-warning btn-sm" %> 
    4: <% end %> 

app/views/atp_selections/_atpdiscard.html.erb:1:in `_app_views_atp_selections__atpdiscard_html_erb__451019467450256030_46643760' 
app/views/atp_selections/create.js.erb:2:in `_app_views_atp_selections_create_js_erb__4477173780394533370_46811020' 

​​は、反復の変数であり、それは、レンダリング部分からインポートされたとき、それは受け入れられていないかのように思えます。

Answer 1

js.erbファイル内から同じ部分を呼び出すと、​​は宣言されていないため、未定義の変数が返されます。

ですから、create.js.erbからあなたの部分の内側に@tennistとしてtennis_playerに合格する必要があります。

$("#atpenlist_form_<%= @tennist.id %>").html("<%= j render 'atp_selections/atpdiscard', locals: {tennis_player: @tennist} %>");