popup with dynamic controls

[Christina Siena <cs...@mountaincable.net>]

I'm developing a complex UI and need some help with managing dynamic controls in a popup.

There is a main screen and a popup.

The main screen displays data in table format:

- in column one, a checkbox so the user can select which row they want to operate on
- in column two, a date range i.e. from 01-01-2005 to 03-31-2005

On the main form, there is a button that the user would select to display the popup.

On the popup, the existing date range is displayed as read-only text as follows:

Existing values:

|____min_____|____max_____|
|_01-01-2005_|_03-31-2005_| (this is the value from the selected item on the main screen)

Also on the popup, there are two rows of min and max fields as follows:

New values:

|____min_____|____max_____|
|____________|____________| (row 1)
|____________|____________| (row 2)

The user may enter data as follows:

New values:

|____min_____|____max_____|
|_01-01-2005_|_02-15-2005_| (row 1)
|_02-16-2005_|_03-31-2005_| (row 2)

There is a button named "Add More". If the user selects "Add More", the popup should display:

Existing values:

|____min_____|____max_____|
|_01-01-2005_|_03-31-2005_| (this is the value from the selected item on the main screen)

New values:

|____min_____|____max_____|
|_01-01-2005_|_02-15-2005_| (row 1)
|_02-16-2005_|_03-31-2005_| (row 2)
|____________|____________| (row 3)

The user may select "Add More" multiple times to dynamically grow the min-max value pairs.

There is a button named "Save". If the user selects "Save", some validation occurs to ensure that the min-max date ranges are valid.

If valid, the main form will be redrawn based on the saved data.

I have a few questions about how this should be done:

Can I use JavaScript or do I have to go back to the server to re-display the popup with the added row? i.e. the min and max controls

If I have to go back to the server, I only have to go back to re-display the popup only, not the main screen, right? I think I answered this myself -- if going back to the server, this is the sequence when the user selects "Add More":
(1) close popup passing back to main screen the indicator indicating that "Add More" was selected and another indicator indicating that the popup needs to be opened again
(2) submit action with hidden field indicating that "Add More" was selected
(3) in the action, add a row to the map (list) representing the rows (the map is in the form bean)
(4) re-display the popup based on the contents of the map (list)
(5) then when the user enters values and selects "Save", the map-backed form attributes will be updated (have not tried but it should work, right?)

Now that I've thought about it, I don't think JavaScript is an option to accomplish this. Has anyone done something similar? I need some advice about some best practices if anyone has developed similar pages.

To further complicate things, these min-max date range entry fields will most likely utilize a calendar component, so I need to ensure that I can build that dynamically as well (since each calendar has to reference the control). Further, the validation at save time also needs to be dynamically generated or I have to go back to the server to validate.

If anyone has developed similar dynamically generated pages, any advice would be appreciated.

Thanks in advance.