Wicket Ajax updates one dropdown to another

Question

It seems that every time I learn a new platform, I have to re-solve this old problem: Refresh the selection in one folder when changing another drop-down list using Ajax. This time the structure of Wicket.

I have two objects that I will name Foo and Bar, and each Foo has a category, which is a rename internal to Foo. In addition, there is a FooDAO with overloaded find() methods: the no-arg version returns all Foo to the database or a version with a parametric "filter" of type Foo, which returns the entire Foo matching filter in non-zero values.

The client wants to associate Foos with Bars when creating a new panel, but to filter Foos by category before adding one. So, suppose that there are already several Foo, each of which has a category. The user goes to the page for creating a bar, and the section for adding a new Foo: Dropdown A displays the categories, and by choice of the category Dropdown B should show a list of available Foo in this category using the Ajax update. Please note that no category is selected, the drop-down list B should show all available Foo.

My HTML looks something 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 identifier and behavior, but right now the focus is in the lists.)

Here is the Java side (in the page 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 did not show my calls to logger.debug , but with them I can show that newSelection is newSelection correctly, and the DAO returns the expected list of Foo. In addition, avaliableFoo List also contains the required values. However, Dropdown B always shows a complete list of Foo, regardless of category selection.

Answer 1

You must add your DropDowns to the AjaxRequestTarget or they will not be updated.

how in

 target.add(selectedFoo);