Git Product home page Git Product logo

nested_form's Introduction

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:

  1. There are Ships.
  2. 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:

  1. Create a new Pilot **.
  2. Edit an existing Pilot.
  3. 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:

  1. Destroy the Pilots that were removed.
  2. Add the Pilots that were created.
  3. Update the Pilots that were changed.
  4. Update the Ship attributes that were changed.

Setup

  1. Clone the app locally.
  2. Run bundle install to make sure all the required gems are present.
  3. Run rake db:migrate to set up the database.
  4. Run rake db:populate to seed the database with some sample data.
  5. Create a new Ship or edit an existing Ship from the list.
  6. In the Ship Details screen, edit any details. Also, add/edit/remove any Pilots in the list.
  7. Save your changes.
  8. View the Ship that was edited during Step 5.
  9. Observe all the changes have been saved.

nested_form's People

Contributors

jeffjohnson9046 avatar thiyaguchangepond avatar

Watchers

James Cloos avatar shivareddy547 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.