Wicket Ajax将一个下拉列表更新为另一个

Question

似乎每次我学习一个新平台时,我都必须重新解决同样的老问题:使用Ajax更改另一个下拉列表时,在一个下拉列表中更新选项.这次框架是Wicket.

我有两个实体,我称之为Foo和Bar,每个Foo都有一个类别,这是Foo内部的枚举.此外,存在具有重载find()方法的FooDAO :no-arg版本返回DB中的所有Foo,或者具有类型Foo的参数"filter"的版本,其返回非空值中的所有Foo匹配过滤器.

客户希望在创建新条形图时将Foos与条形图关联,但在添加条形图之前按类别过滤Foos.假设已经存在少数Foo,每个都有一个类别.用户进入创建栏页面和添加新Foo的部分:下拉列表A列出类别,并且在选择类别时,下拉列表B应该通过Ajax更新显示该类别中可用Foo的列表.注意,没有选择类别,下拉列表B应该显示所有可用的Foo.

我的HTML看起来有点像这样:

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

(该按钮最终将获得自己的id和行为,但现在焦点在于列表.)

这是Java端(在页面的构造函数方法中):

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

我没有显示我的logger.debug调用,但是通过它们我可以显示newSelection正确捕获,并且DAO正在返回预期的Foo列表.此外,avaliableFooList也包含所需的值.但是,下拉列表B始终显示Foo的完整列表,无论选择何种类别.

Answer 1

您必须将您的DropDowns添加到AjaxRequestTarget,否则它们将不会更新.

如在

target.add(selectedFoo);