Wicket Ajax update one dropdown to another

Question

It seems like every time I learn a new platform, I have to re-solve this same old problem: Update the choices in one drop down upon change of another dropdown, using Ajax. This time the framework is Wicket.

I have two entities I'll call Foo and Bar, and each Foo has a category, which is an enum internal to Foo. Also, there exists a FooDAO with overloaded find() methods: the no-arg version returns all Foo in the DB, or a version with a paramater "filter" of Type Foo that returns all Foo matching filter in non-null values.

The client wants to associate Foos to Bars when creating a new Bar, but to filter the Foos by category before adding one. So assume a handful of Foo already exist, each with a category. A user goes to the create Bar page and the section to add a new Foo: Dropdown A lists the categories, and upon choice of a category, Dropdown B is supposed to show the list of available Foo in that category, via an Ajax update. Note that is no category is selected, dropdown B should show all available Foo.

My HTML looks a little like this:

<form wicket:id="createBarForm">
<div>
    <label>Category</label>
    <select wicket:id="category">
    </select>
</div>
<div>
    <label>Available Foo(s)</label>
    <select class="xlarge" wicket:id="selectedFoo">
    </select>
</div>
<button style="float:right;">Add</button>

<!-- and more Bar related fields -->
</form>

(The button will eventually get its own id and behavior, but right now the focus is on the lists.)

Here is the Java side (in the page's constructor method):

    createBarForm = new Form<Bar>("createBarForm",
            new CompoundPropertyModel<Bar>());

    final List<Foo> availableFoo = fooDao.find();

    final FormComponent<Foo> selectedFoo =
            new DropDownChoice<Foo>("selectedFoo", 
                    Model.of(new TechnologyFoo()), availableFoo);

    Foo.Category categoryStandin = null;

    final FormComponent<Foo.Category> fooCategory =
            new DropDownChoice<Foo.Category>
                ("fooCategory", Model.of(categoryStandin),
                        Arrays.asList(Foo.Category.values()));

    fooCategory.add(new AjaxFormComponentUpdatingBehavior("onchange") {
        private static final long serialVersionUID = 1L;
        @Override
        protected void onUpdate(AjaxRequestTarget target) {
            // re-set the form component
            availableFoo.clear();
            ((DropDownChoice<Foo>)selectedFoo).setChoices(availableFoo);
            createBarForm.remove(selectedFoo);

            Foo.Category newSelection =
                    fooCategory.getModelObject();
            if (newSelection != null) {
                Foo filter = new Foo();
                filter.setCategory(newSelection);
                availableFoo.addAll(fooDao.find(filter));
            }
            else {
                availableFoo.addAll(fooDao.find());
            }
            // re-fresh the form component
            ((DropDownChoice<Foo>)selectedFoo).setChoices(availableFoo);
            createBarForm.add(selectedFoo);
        }
    });

    createBarForm.add(fooCategory);
    createBarForm.add(selectedFoo);

    // etc.....

I haven't shown my logger.debug calls, but with them I am able to show that the newSelection is being captured correctly, and the DAO is returning the expected list of Foo. Also, the avaliableFoo List does contain the required values as well. However, Dropdown B always shows the full list of Foo, regardless of the category selection.

Answer 1

You've got to add your DropDowns to the AjaxRequestTarget or they wouldn't be updated.

as in

target.add(selectedFoo);