Patterns / strategies for creating a complex nested AJAX / jQuery form

Question

We need to build quite a complicated form, which will allow creation / updating of multiple instances of entity A, where entity A can have multiple instances of entity B.

Both types of entities are quite complicated (lots of fields and dropdowns) but only a few of these fields need filling in on creation. The requirement is to be able to create many items fast, and to allow the filling in of other details later.

Any tips on javascript / jquery patterns that might be useful for handling / storing all entity data would be useful. Also, usually I'd do something like this by copying new form sections from hidden instances on the page, but wonder if there's a better more object oriented way of doing all this in javascript. I'm in the process of reading around now, but thought I'd post on here in case someone can point me in the right direction fast, to save time.

Many thanks.

Answer 1

I'd highly suggest jQuery templates, or in general some kind of JavaScript templating solution.

Answer 2

I use a recursive function to populate the form elements... i.e.

An Ajax call is used to populate a div. The function that generates the response loops through instances of entity A for example and creates identifiable div blocks, and for each instance of A, calls itself to loop through the child entries. Once all of the recursion is done, the resulting HTML is loaded into the form div.

Is the user creating new entities on the front end? You have multiple options for this. I would probably use Ajax to initiate the creation of a new entity, and append to the form div the new entity. Each entity would have proper ID tags and use change events to submit ajax calls and be updated on the fly.