Controller not responding to Ajax - ruby-on-rails

Question

In the home page of my application I iterate over a collection of tennis players (#atp_ranks), and for each tennis player I create a table row with his attributes and a button which allows the current user to enlist that tennis player:
<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>
In order to give the user the opportunity to immediately see the result of submitting the form, I added remote: true in each form, and saved these forms as partials in app/views/atp_selections.
Then I created in the above directory the create.js.erb and destroy.js.erb files. Below is the content of the create.js.erb file:
$("#atp_count").html('<%= current_user.atp_ranks.count %> selected');
$("#atpenlist_form_<%= #tennist.id %>").html("<%= escape_javascript(render('atp_selections/atpdiscard')) %>");
The jQuery code should manipulate the atp_count id and the atpenlist_form_<%= #tennist.id %> id, that is the id of the fourth th tag, and the id of the div containing the button's forms.
Below is an extract of my atp_selections controller, which is too long to report it entirely:
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
...
As you can see, the create action of the atp_selections controller is made of multiple if-else statements that respond to enlistment rules. However, what is important here is that in each condition I included the required code with the respond_to method for requests to be handled by Ajax.
However the controller does not respond to Ajax, and changes to atp_count and atpenlist_form_<%= #tennist.id %> are visible only after a page refresh.
The rails console reports the following error:
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'
tennis_player is the variable of the iteration and it seems as if it is not accepted when it is imported from a rendered partial.

Answer 1

When you call the same partial from within the js.erb file, tennis_player is not declared, and so you get the error undefined variable.
So you need to pass #tennist as tennis_player inside your partial from create.js.erb:
$("#atpenlist_form_<%= #tennist.id %>").html("<%= j render 'atp_selections/atpdiscard', locals: {tennis_player: #tennist} %>");