How to add options to a drop-down on the fly?

[Andrew Swan]

Requirement

As a user, if I am filling in a create/update form for some entity, and a drop-down of related entities doesn't contain the related entity I want to choose, I would like to be able to create that related entity on the fly, and have the drop-down updated, without losing what I have entered (or selected) in the form so far.

Example Scenario

Let's say I have a pizza application, where the Pizza class has several fields:

private Base base;
private Set<Topping> toppings;
private BigDecimal price;
private Size size;
etc.

The "Base" and "Size" classes are my own entities with their own fields, validation rules, business logic, etc.

And say I have a "create Pizza" form, which displays all the relevant fields including a drop-down (i.e. an HTML "SELECT" tag) for choosing the Base.

If I am filling in the "create Pizza" form, and the "Base" drop-down doesn't contain the base I want, I want to be able to add a new Base on the fly without losing what I have entered (or selected) in the Pizza form so far. For example, if I'm adding a thin-crust Pizza, and the only available base is "Thick", I want to be able to add the "Thin" Base (with all the usual validation etc), and have it appear in the "Base" drop-down on the Pizza form that I've already partially filled in.

Ideas

I can think of a couple of ways of doing this:

1. Use Spring WebFlow (can it preserve unsubmitted form data between views?)
2. Use Spring JS' AjaxEventDecoration to show the existing "Create Base" form as a modal popup. On the Pizza form, use Dojo to refresh the contents of the "Base" drop-down each time it's clicked (via a dojo.data.ItemFileReadStore to query a URL that returns a JSON-formatted list of the available Bases).

I've got #2 mostly working. I have an "add" link next to the Base drop-down. When I click it, the "Create Base" form appears in a popup and when submitted, correctly adds the new base. The only snag is that when the popup closes, the BaseController#create method renders the "Show Base" page instead of leaving me on the Pizza form. I tried returning void from that method, but that just replaces the Pizza form with a blank page.

Can #2 be made to work? Would WebFlow be easier?

(Just to be clear, I'm not proposing an enhancement to Roo, I'd simply like to know how to do this in a Roo 1.0.2 app, using JSPX, Tiles, MVC, etc)

[Stefan Schmidt]

Hi Andrew,

I have not (yet) played with this myself but you would need to work with @ResponseBody on the controller side so it won't redirect to your view. Take a look at the MVC Ajax sample application here:

https://fisheye.springsource.org/bro...er.java?r=HEAD

Hope this helps! It would be great if you could share your code in a blog post once it works so other users can benefit from it

Cheers,
Stefan

[Andrew Swan]

Hi Stefan,

I ended up getting it working with SWF, and have posted about my experiences here:

http://forum.springsource.org/showthread.php?t=94103