Rails Ajax创建模型的新实例，并将其复选框添加到表单

Question

I have a view that renders two form partials:

matches/new.html.erb:

<%= render 'players/new' %>
<%= render 'matches/form' %>

matches/form is a form for a new Match. On the form you can add existing Players to Teams. The Players collection is rendered as a collection of checkboxes. When the form is submitted, the Teams get created with those selected Players inside them:

matches/_form.html.erb:

<%= form_for @match do |f| %>
    <%= f.fields_for :team_1 do |team_1_form| %>
        <%= team_1_form.label "Team 1" %><br>
        <%= team_1_form.collection_check_boxes :player_ids, Player.all, :id, :name, include_hidden: false %>
    <% end %>
    <br>
    <%= f.fields_for :team_2 do |team_2_form| %>
        <%= team_2_form.label "Team 2" %><br>
        <%= team_2_form.collection_check_boxes :player_ids, Player.all, :id, :name, include_hidden: false %>
    <% end %>
    <br>
    <%= f.submit "Start Match" %>
<% end %>

In players/new you can create new Players:

players/_new.html.erb:

<%= form_for @player, remote: true do |f| %>
    <%= f.text_field :name %>
    <%= f.submit 'Create Player' %>
<% end %>

So the idea is, I want to be able to create a Player (which the form does do successfully, by the way) via AJAX and for that Player's checkbox to be added to the Players' checkbox collection in the view without a page refresh.

I've tried a few different things (you'll see a few commented-out things in the create.js.erb file). I've been stuck on this for days and I've googled the hell out of it. Help please!

Github repo: https://github.com/Yorkshireman/foosball

Controllers:

class PlayersController < ApplicationController
    def create
        @player = Player.create(name: params[:player][:name], league: current_league)
        @match = Match.new
        current_league.players << @player
        respond_to do |format|
            format.js   {}
        end
    end
end

class MatchesController < ApplicationController
    def new
        @player = Player.new
        @players = Player.all
        @match = Match.new
    end

    def create
        @match = Match.new(league: current_league)

        if team_1_player_ids && team_2_player_ids
            teams = BuildTeams.call team_1_player_ids, team_2_player_ids, current_league
            InsertTeamsIntoMatch.call teams, @match
            @match.save
            render nothing: true
        else
            flash[:alert] = "Please select players for both teams"
            render :new
        end
    end


    private

    def team_1_player_ids
        params[:match] && params[:match][:team_1] && params[:match][:team_1][:player_ids]
    end

    def team_2_player_ids
        params[:match] && params[:match][:team_2] && params[:match][:team_2][:player_ids]
    end
end

views/players/create.js.erb:

// $("<%= escape_javascript(render partial: 'matches') %>");
// $('#new_match_div').html("<%= escape_javascript(render 'matches/new') %>");
$('#new_match').html("<%= escape_javascript(render 'matches/form') %>");

// $('#new_match').replaceWith("<p>Replaced</p>");

Answer 1

I think there are some inconsistencies between the link to your create_players branch and the code that you posted in this question.

I checkout out your code at https://github.com/Yorkshireman/foosball/commit/2413eb576f96333acbb02f1bb05689ae1dc47d3e ( temp_branch ), then made the following changes:

1. I replaced both @cat and @dog with @player .

2. I changed the contents of app/views/player/create.js.erb to read exactly as this:

    $("<%= escape_javascript(render @player) %>").appendTo("#new_match"); $('#new_match').html("<p>Replaced</p>"); $('#new_match').html("<%= escape_javascript(render partial: 'matches/form') %>"); 

The second line has no effect on the end result, so it can be removed.

3. In the PlayersController#create , I added:

    @match = Match.new(league: current_league) 

Adding a new player successfully updates the checkboxes. If those changes do not work for you, then their might a be browser-specific JS problem that you're encountering.

Answer 2

Ok, so this is before any refactoring, but it works.

Thanks to sealocal, the create.js now reads:

$("<%= escape_javascript(render @player) %>").appendTo("#new_match");
$('#new_match').html("<%= escape_javascript(render partial: 'matches/form') %>");

But unfortunately, I don't fully understand what is going on here; I thought appendTo would actually render the player checkbox in the browser, but it seems the entire partial has be re-rendered on the next line? Why is this? What does appendTo do exactly?

Here's the weird thing - with the PlayersController like this:

class PlayersController < ApplicationController
    def create
        @player = Player.create(name: params[:player][:name], league: current_league)
        @match = Match.new(league: current_league)
        current_league.players << @player
        respond_to do |format|
            format.js   {}
        end
    end
end

I was getting the error:

 Rendered players/create.js.erb (33.7ms)
Completed 500 Internal Server Error in 314ms (ActiveRecord: 19.8ms)

ActionView::Template::Error (Missing partial players/_matches, application/_matches with {:locale=>[:en], :formats=>[:js, :html], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :jbuilder]}. Searched in:
  * "/home/andrew/projects/foosball/app/views"

So I googled that error code and saw this (not the answer, but where the poster says, on line 3: "it is requesting a view with the same name as the model."). So I figured this must be some Rails magic, inferring the view from the #create method. SO... (drum roll)...

I tried shifting the @match line to above the @player line and BOOM! It worked!:

class PlayersController < ApplicationController
    def create
        @match = Match.new(league: current_league)
        @player = Player.create(name: params[:player][:name], league: current_league)
        current_league.players << @player
        respond_to do |format|
            format.js   {}
        end
    end
end

If I'm honest, though, I'm not entirely sure why this works. For now, I have put it down to Rails, but if someone could shed some more light on it, that would be great.