How to use AJAX with multiple nested forms? "The Gym Plan" problem

I want to be able to fill a table with some data through AJAX. My problem is that this data is from two different models. This will be long 开发者_JS百科but please bear with me.

Imagine an application that would fill the plan for working out at the gym (clearly not an application for me :D). This plan has many routines (per type basis or day basis) which has many steps to go through.

Is it possible to use AJAX to fill a nice table that fills dynamically? Ideally I would prefer to save and display a table each time the user fills any new data.

What I have so far:

In the models I added the accepts_nested_attributes_for property.

I am using nested_form that allows us to add and remove nested models.

Let's take a look at our form:

• app/views/plans/_form.html.erb

  <%= nested_form_for @plan, :url => plan_path(@plan), :html => { :class => :form } do |f| %>
    <%= f.label :name, "Plan Name" %>
    <%= f.text_field :name %>
    <%= f.fields_for :routines do |r| %>
      <%= render 'routine_fields', :f => r %>
    <% end %>
    <%= f.submit %>
    <%= f.link_to_add "Add a routine", :routines %>
  <% end %>
  

So fields_for allows us to save many routines inside a plan, NICE! Let's define our fields views:

• app/views/plans/_routine_fields.html.erb

  <%= f.label :name, "Routine Name" %>
  <%= f.text_field :name %>
  <%= f.fields_for :steps do |s| %>
    <%= render 'step_fields', :f => s %>
  <% end %>
  <%= f.link_to_add "Add a step", :steps %>
  <%= f.link_to_remove "Remove this routine" %>
  

• app/views/plans/_step_fields.html.erb

  <%= f.label :name, "Step Name" %>
  <%= f.text_field :name %>
  <%= f.link_to_remove "Remove this step" %>
  

This works great! We can add as many routines inside a plan and many steps inside a routine we are able to create a complete plan in one view.

BUT IS UGLY! and also very confusing! So my problem again: How would I update the table each time the user fills any new data?

Ideal:

One approach that you could use for this would be to break up the form into different forms that are loaded via ajax, and just continuously update attributes on a model. You could also just use the form that you have now and break up the html so that it doesn't all show in a table.

For dealing with forms, you could check out the railscast on wicked

For dealing with ajax, there is a very good railscast on ajax/jquery

You could also break up this logic into different partials, and change the UX a bit, so that a user still has the same functionality, but it lives on a different view. You can add ajax to this by following the previously mentioned ajax railscast or using the turbolinks gem (though turbolinks is a bit different).

It seems to me that this is primarily a UX problem, and you're trying to crowbar a particular implementation into a rigid UX. I would try reframing the UX to see if there is a more elegant solution to the problems you have mentioned.