title: Wicket Ajax update one dropdown to another
body: <p>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.</p>
  
  <p>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 <code>find()</code> 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.</p>
  
  <p>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.</p>
  
  <p>My HTML looks a little like this:</p>
  
  <pre><code>&lt;form wicket:id="createBarForm"&gt;
  &lt;div&gt;
      &lt;label&gt;Category&lt;/label&gt;
      &lt;select wicket:id="category"&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Available Foo(s)&lt;/label&gt;
      &lt;select class="xlarge" wicket:id="selectedFoo"&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;button style="float:right;"&gt;Add&lt;/button&gt;
  
  &lt;!-- and more Bar related fields --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>(The button will eventually get its own id and behavior, but right now the focus is on the lists.)</p>
  
  <p>Here is the Java side (in the page's constructor method):</p>
  
  <pre><code>    createBarForm = new Form&lt;Bar&gt;("createBarForm",
              new CompoundPropertyModel&lt;Bar&gt;());
  
      final List&lt;Foo&gt; availableFoo = fooDao.find();
  
      final FormComponent&lt;Foo&gt; selectedFoo =
              new DropDownChoice&lt;Foo&gt;("selectedFoo", 
                      Model.of(new TechnologyFoo()), availableFoo);
  
      Foo.Category categoryStandin = null;
  
      final FormComponent&lt;Foo.Category&gt; fooCategory =
              new DropDownChoice&lt;Foo.Category&gt;
                  ("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&lt;Foo&gt;)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&lt;Foo&gt;)selectedFoo).setChoices(availableFoo);
              createBarForm.add(selectedFoo);
          }
      });
  
      createBarForm.add(fooCategory);
      createBarForm.add(selectedFoo);
  
      // etc.....
  </code></pre>
  
  <p>I haven't shown my <code>logger.debug</code> calls, but with them I am able to show that the <code>newSelection</code> is being captured correctly, and the DAO is returning the expected list of Foo.  Also, the <code>avaliableFoo</code> List does contain the required values as well.  However, Dropdown B always shows the full list of Foo, regardless
  of the category selection.</p>