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

前端之家收集整理的这篇文章主要介绍了Wicket Ajax将一个下拉列表更新为另一个前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
似乎每次我学习一个新平台,我都必须重新解决同样的老问题:
使用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列表.此外,avaliableFoo列表也包含所需的值.但是,Dropdown B始终显示Foo的完整列表,无论如何
类别选择.

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

如在

target.add(selectedFoo);
原文链接:https://www.f2er.com/ajax/159915.html

猜你在找的Ajax相关文章