Announcement Announcement Module
No announcement yet.
How to add options to a drop-down on the fly? Page Title Module
Move Remove Collapse
Conversation Detail Module
  • Filter
  • Time
  • Show
Clear All
new posts

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


    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;
    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.


    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 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)

  • #2
    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:

    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



    • #3
      Working via SWF

      Hi Stefan,

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