Wicket 动态 ListView - Ajax 不会更新默认项目
Wicket dynamic ListView - default item won't get updated by Ajax
我有一个 ListView,从显示的一个项目开始,我在每个新项目后附加一个 AjaxSubmitLink,效果很好。
在 ListView 中,我有两个 DropDownChoices,第一个通过 AjaxFormComponentUpdatingBehavior 触发第二个的选择。这也有效,但前提是我将另一个项目添加到默认项目。
如果未单击 AjaxSubmitLink,则不会更新第二个 DropDownChoice,并且在 Ajax 调试 window 中有一个空白而不是第一个 DropDownChoice 的 ID。
这是我的代码:
final MarkupContainer devicescontainer = new WebMarkupContainer("devicesContainer");
devicescontainer.setOutputMarkupId(true);
add(devicescontainer);
final ListView devicesListView = new ListView<Device>("devices", devices) {
@Override
protected void populateItem(ListItem<Device> item) {
item.setModel(new CompoundPropertyModel<Device>(item.getModel()));
final List<Device.DeviceCategory> cats = Arrays.asList(Device.DeviceCategory.values());
final DropDownChoice<Device.DeviceCategory> categoryDropDownChoice = new DropDownChoice<Device.DeviceCategory>("deviceCategory", cats);
final DropDownChoice<Device.DeviceSubcategory> subcategoryDropDownChoice = new DropDownChoice<>("deviceSubcategory");
categoryDropDownChoice.setOutputMarkupId(true);
subcategoryDropDownChoice.setOutputMarkupId(true);
categoryDropDownChoice.add(new AjaxFormComponentUpdatingBehavior("change") {
@Override
protected void onUpdate(AjaxRequestTarget target) {
List<Device.DeviceSubcategory> subcats = Device.getPotentialSubcategories(categoryDropDownChoice.getModelObject());
subcategoryDropDownChoice.setChoices(subcats);
target.add(subcategoryDropDownChoice);
}});
item.add(categoryDropDownChoice);
item.add(subcategoryDropDownChoice);
}
}.setReuseItems(true);
devicescontainer.add(devicesListView);
AjaxSubmitLink addDeviceLink = new AjaxSubmitLink("addDevice") {
@Override
public void onSubmit(AjaxRequestTarget target, Form form) {
devicesListView.getModelObject().add(new Device(newId));
if (target != null){
target.add(devicescontainer);
}
}
};
addDeviceLink.setDefaultFormProcessing(false);
devicescontainer.add(addDeviceLink);
如何在不先单击添加设备 link 的情况下让 Ajax 驱动的 DropDownChoice 工作?
编辑:所有元素生成的id都是完整且唯一的。 ListView 项目没有 ID,即使有也无济于事。
我已将您的代码发布到 Wicket 示例页面中,它立即起作用。
请检查您的标记,这对我来说效果很好:
<form wicket:id="form">
<div wicket:id="devicesContainer">
<div wicket:id="devices">
<select wicket:id="deviceCategory"/>
<select wicket:id="deviceSubcategory"/>
</div>
<a wicket:id="addDevice">+</a>
</div>
</form>
原来是公司 JavaScript 导致了问题。我相信它会调用 <select>
上的 select2 jquery 插件,这样 Ajax 就会被覆盖。
我刚刚删除了整个脚本,现在一切正常。
我有一个 ListView,从显示的一个项目开始,我在每个新项目后附加一个 AjaxSubmitLink,效果很好。 在 ListView 中,我有两个 DropDownChoices,第一个通过 AjaxFormComponentUpdatingBehavior 触发第二个的选择。这也有效,但前提是我将另一个项目添加到默认项目。 如果未单击 AjaxSubmitLink,则不会更新第二个 DropDownChoice,并且在 Ajax 调试 window 中有一个空白而不是第一个 DropDownChoice 的 ID。
这是我的代码:
final MarkupContainer devicescontainer = new WebMarkupContainer("devicesContainer");
devicescontainer.setOutputMarkupId(true);
add(devicescontainer);
final ListView devicesListView = new ListView<Device>("devices", devices) {
@Override
protected void populateItem(ListItem<Device> item) {
item.setModel(new CompoundPropertyModel<Device>(item.getModel()));
final List<Device.DeviceCategory> cats = Arrays.asList(Device.DeviceCategory.values());
final DropDownChoice<Device.DeviceCategory> categoryDropDownChoice = new DropDownChoice<Device.DeviceCategory>("deviceCategory", cats);
final DropDownChoice<Device.DeviceSubcategory> subcategoryDropDownChoice = new DropDownChoice<>("deviceSubcategory");
categoryDropDownChoice.setOutputMarkupId(true);
subcategoryDropDownChoice.setOutputMarkupId(true);
categoryDropDownChoice.add(new AjaxFormComponentUpdatingBehavior("change") {
@Override
protected void onUpdate(AjaxRequestTarget target) {
List<Device.DeviceSubcategory> subcats = Device.getPotentialSubcategories(categoryDropDownChoice.getModelObject());
subcategoryDropDownChoice.setChoices(subcats);
target.add(subcategoryDropDownChoice);
}});
item.add(categoryDropDownChoice);
item.add(subcategoryDropDownChoice);
}
}.setReuseItems(true);
devicescontainer.add(devicesListView);
AjaxSubmitLink addDeviceLink = new AjaxSubmitLink("addDevice") {
@Override
public void onSubmit(AjaxRequestTarget target, Form form) {
devicesListView.getModelObject().add(new Device(newId));
if (target != null){
target.add(devicescontainer);
}
}
};
addDeviceLink.setDefaultFormProcessing(false);
devicescontainer.add(addDeviceLink);
如何在不先单击添加设备 link 的情况下让 Ajax 驱动的 DropDownChoice 工作?
编辑:所有元素生成的id都是完整且唯一的。 ListView 项目没有 ID,即使有也无济于事。
我已将您的代码发布到 Wicket 示例页面中,它立即起作用。
请检查您的标记,这对我来说效果很好:
<form wicket:id="form">
<div wicket:id="devicesContainer">
<div wicket:id="devices">
<select wicket:id="deviceCategory"/>
<select wicket:id="deviceSubcategory"/>
</div>
<a wicket:id="addDevice">+</a>
</div>
</form>
原来是公司 JavaScript 导致了问题。我相信它会调用 <select>
上的 select2 jquery 插件,这样 Ajax 就会被覆盖。
我刚刚删除了整个脚本,现在一切正常。