根据下拉菜单中的选择动态初始化未保存的父对象的子记录

Question

I have a problem which I feel shouldn't be as complex as it feels to me at the moment. I want to initialize child records based on a selection made on a dropdown in the parent form and then show these childs (at the moment always 2) for further filling.

There are several mostly relevant answers here and elsewhere around the web, but so far I have failed in building a working solution.

Main building blocks are as follows.

game.rb (parent)

class Game < ApplicationRecord
  has_many :game_players, dependent: :destroy
  belongs_to :scenario

  accepts_nested_attributes_for :game_players
end

game_player.rb (children)

class GamePlayer < ApplicationRecord
  belongs_to :game
  belongs_to :user
  belongs_to :force
end

In a form for new game I have following dropdown

<div class="form-group">
  <%= form.label :scenario_id %>
  <%= form.collection_select :scenario_id, Scenario.all, :id, :name, {},     { class: "form-control" }   %>
</div>

Selection from this dropdown filters the possible forces for game_players (each scenario has two opposing forces).

I grab the scenario_id in game.coffee

jQuery ->
  scenarios = $('[name*=scenario_id]').html()
  $('[name*=scenario_id]').change ->
    scenario_id = $('[name*=scenario_id] :selected').val()
    params = 'scenario_id=' + scenario_id
    $.ajax {
      url: "/games/prepare_players",
      data: params
      success: () ->
    }

And here I am stuck. Based on what I have read I am trying to fire up this action in games_controller.rb .

def prepare_players
  forces = ScenarioForce.where(scenario_id: params[:scenario_id])
  forces.each do |force|
    @game.game_players << GamePlayer.new( force_id: force.id)
  end
  respond_to do |format|
    format.js
  end
end

Which again should render this in prepare_players.js.erb

$('[name=player-cards]').html("<%= escape_javascript(render partial: 'players', locals: {form: form}).html_safe %>")

Which should show the form for both players where it is possible to choose player from users for both sides.

<div name="player-cards">
  <h3>Players</h3>
  <% @game.game_players.each do |player| %>
    <p><%= player.force.name %></p>
    <%= form.fields_for player do |pf| %>
      <div class="form-group">
        <%= pf.label :name %>
        <%= pf.collection_select :user_id, User.all, :id, :full_name, {},     {class: "form-control"}  %>
      </div>
    <% end %>
  <% end %>
</div>

But as I mentiond I am stuck in the Ajax-call. My controller action is not fired and instead I get show-action with id=prepare_players. In routes.rb I have this

get 'games/prepare_players', to: 'games#prepare_players'

UPDATE As per Sebastiáns advice I am now hitting the correct action in games_controller. But as I feared, I can't add new game_players to my parent without knowing relevant id. It would be easy to pass the id if I just had one, but I don't because parent has not been saved yet.

I am using Rails 5.1.4 at the moment.

Any pointers guiding me towards getting this to work are highly appreciated.

Answer 1

Make sure the route you're using for the AJAX request is being defined before any other, for instance a resource :games . If the route is after this one, then it'll fire the set_game method and redirect you to games#show, and there you'll receive an error like:

Completed 404 Not Found in 4ms (ActiveRecord: 0.3ms)

ActiveRecord::RecordNotFound (Couldn't find Game with 'id'=prepare_players):

app/controllers/games_controller.rb:65:in `set_game'

Note the games_controller.rb:65:in set_game'`.