Question

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

我有两个实体，我将其称为Foo和Bar，每个Foo都有一个类别，这是Foo内部的枚举。此外，存在一个带有重载find()方法的FooDAO：no-arg版本返回DB中的所有Foo，或者具有Type 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列表。此外，avaliableFoo列表也包含所需的值。但是，Dropdown B始终显示Foo的完整列表，无论如何选择类别。

Answer 1

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

，如

target.add(selectedFoo);

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

1 个答案: