nested-form - an Exercise in fields_for, accepts_nested_attributes_for and Modal Forms
A Rails 3.2 CRUD application that demonstrates complex forms, including a modal window for adding new child records.
This demo app builds on the information presented in [Railscast 197] 1. I wanted to take it a step further and see if I could use a modal form for the "child" object data entry fields. I couldn't find any good demos on the internet on how to go about this, so I created this demo app to try it out.
The idea behind this application is fairly simple: it's a Star Wars Starfighter Database (albeit a VERY simplified one). The object model is very simple:
- There are Ships.
- Ships have zero to many Pilots (i.e. characters/personalities who fly the type of ship being viewed).
For example: Garven Dreis, Wedge Antilles, and Biggs Darklighter all fly the T-65 X-Wing.
This application will allow a user to create/edit/delete a Ship. While creating a Ship, a user has the option of creating records for the Pilots that fly the Ship being created. When editing an existing Ship, a user has the ability to:
- Create a new Pilot **.
- Edit an existing Pilot.
- Remove a Pilot from the list.
** = this where the modal part comes in to play. In the [Railscast] 1, the fields to add a new "child" object are inserted before the link, and a new set of fields is inserted for each new "child" object the user wants to create. Instead, I'd like to use a modal form that will display the required data entry fields. The form allows a user to enter a single "child" object (a Pilot in this case). After the Pilot has been added (i.e. the user clicks "Add" on the modal form), the new Pilot will appear in the table of Pilots.
A user can conduct any number of the changes cited above prior to saving, and Rails/ActiveRecord will do the right thing! It will:
- Destroy the Pilots that were removed.
- Add the Pilots that were created.
- Update the Pilots that were changed.
- Update the Ship attributes that were changed.
- Clone the app locally.
bundle installto make sure all the required gems are present.
rake db:migrateto set up the database.
rake db:populateto seed the database with some sample data.
- Create a new Ship or edit an existing Ship from the list.
- In the Ship Details screen, edit any details. Also, add/edit/remove any Pilots in the list.
- Save your changes.
- View the Ship that was edited during Step 5.
- Observe all the changes have been saved.