Rails 5 - use collection_radio_buttons to open a partial with nested models?

问题

(my first SO question, so please be kind!)

Each Schedule has only one System; Each System has many Applications; Each Application has many Users and Documents.

What I want to do to create a Schedule entry:

Generate a form that first shows multiple System names that can be clicked. When a System is clicked, it opens a partial that lists Applications associated with that System. Then, when clicking particular Applications, yet another partial opens that contains Users and Documents associated with that particular Application.

When editing this entry later, I want to be able to see everything I had entered before, with the correct System, Application(s), User(s), and Document(s) already pre-selected.

My question here is how to make a form element for choosing a System that will open another partial -- and, later, will be pre-selected when I view and/or edit the entry.

What kinda works right now is a <%= link_to %>, styled with Bootstrap, which opens its associated Applications partial when it's clicked. However, I'm not able to save the System from it, and I can't figure out whether it can display as already-selected later, such as in an Edit form.

We're trying to use radio buttons instead (because you can't pre-select a link_to, right?), so I've been throwing pasta at the wall with f.collection_radio_buttons, or iterating over f.radio_button, or a tag of <input type="radio">. However, I can't figure out how to make a radio button open a partial.

Since first posting this question, I've narrowed down to using f.radio_button within a loop. It shows as correctly "checked" when viewed while Editing the entry later, but it still doesn't open the partial.

Here's a snippet from /_schedule_form.html.erb:

<%= form_for @schedule do |f| %>

  <% System.all.each do |a| %>

   <!-- This link_to makes the Applications partial appear, but that's all it does -->
    <%= link_to a.system_nm, system_applications_path(:system_id => a.id, 
    :schedule_id => params['id']), :title => 'Click to choose system', 
    :class -> 'btn btn-default btn-flat active', data: {:remote => true, 
    'data-target' => '#applicationList'} %>
     </a>  <!-- closes the link_to tag, I believe -->
    <% end %>

      <div id="applicationList">
         <!-- the Applications partial renders here -->
      </div>

   <% end %>

Here's the system_applications.js.erb file that opens the _system_applications.html.erb partial:

$("#applicationList").html("<%= escape_javascript(render 
    'system_applications', locals: {applications: @applications, 
    schedule_applications_array: @schedule_applications_array})%>");

Here's an update with possible clue: I'm now using this embedded Ruby code:

<% System.all.each do |rt| %>
  <label>
    <%= f.radio_button :system_id, rt.id, data:{:remote => true, 'data-target' => 
   '@applicationList'}, href: system_applications_path(:system_id => rt.id, 
   :schedule_id => params['id']), class: 'remote-input', onclick: 
   "#applicationsList" %>
  </label>
<% end %>

And, when I click on that radio button, I'm getting a JS error in the browser console Uncaught SyntaxError: Invalid or Unexpected Token which points to the rendered HTML, and specifically the > at the end of the line:

<input data-remote="true" data-data-target="#applicationList" href="/schedules/system_applications/24?schedule_id=122" class="remote-input" onclick="#applicationList" type="radio" value="24" checked="checked" name="schedule[system_id]" id="schedule_system_id_24" />

Just to make it more complicated: When creating a NEW entry, and when I hover over one of the link_to buttons, I get a clean-looking path like /schedules/system_applications/24, and that's what gets sent to the server when clicked (which then reads the params as {"system_id"=>"24"}. But hovering over the f.radio_button labels shows no path, and clicking it sends "/schedules/new?schedule%5Bsystem_id%5D=24" with the params {"schedule"=>{"system_id"=>"24"}}. This triggers a 500 (Internal Server Error) (which makes sense, because there's no path for that URL). Do the params need to be the same? If so, how am I screwing it up?

Also, clicking the radio button sends the request to SchedulesController#new, while clicking the link_to sends it to SchedulesController#system_applications. I don't understand how I'm telling the radio button to send it to #new.

Where I'm stuck now is, the f.radio_button renders as "checked", which is correct; but it doesn't open the partial. The link_to version opens the partial, but I don't think it can render as "checked" later on.

Let me know if I'm asking clearly enough, too.

回答1:

I think we made it work. One key change was to use url instead of href to use the system_applications_path to the controller, as shown here:

<% @systems.each do |a|
  <label class="btn btn-sm btn-default">
    <%= f.radio_button :system_id, a.id, :data => {url:system_applications_path(:system_id 
    => a.id, :schedule_id => params['id']), 'data-target' => '#applicationList'+a.id.to_s,
    :remote => true} %>
    <%= a.system_nm %>
  </label>
<% end %>

Now, when I click the radio button, it opens the correct partial, and it shows as selected later when I go to edit the entry. The Bootstrap styling (btn btn-sm btn-default) helps to show how much clickable area there is, but it's not required for basic functionality.

I suppose some of that [in]famous Rails Magic has radio_buttons treating href: differently than url. But it's "magic" only because I don't understand it (yet -- growth mindset!). What's the explanation behind it?

来源：https://stackoverflow.com/questions/46352294/rails-5-use-collection-radio-buttons-to-open-a-partial-with-nested-models