java Apache Wicket AjaxRequestTarget ListView组件未刷新或更新
我对ApacheWicket（字面意思）非常陌生，在添加一个项目（从引导模式框）后，我得到了一个任务，需要通过ajax刷新一个表（ListView）
假设我有一个页面显示实验室详细信息（房间），还有一个表格显示实验室设备列表
要添加实验室设备，有一个按钮，单击时。。。将显示一个模式框（弹出窗口），用户可以从下拉列表中选择实验室设备
添加实验室设备时（从弹出模式），模式将关闭/隐藏，然后通过ajax刷新表格组件
问题：
刷新组件contentDevices的代码似乎不起作用。添加实验室设备后，我可以看到它反映在数据库中。
但由于未知原因，带有显示实验室设备清单的表格的容器并不新鲜
添加/删除实验室设备后，我想刷新容器/组件contentDevices。组件contentDevices有一个子项，这是一个显示实验室设备列表的表
现在的问题是，我仍然需要刷新页面（浏览器刷新），以便新添加的实验室设备能够反映
顺便说一下，Device类没有onBeforeRender()。这个类的新实例将替换现有的contentDevices
已经好几天了，但我不明白为什么它不令人耳目一新。如果这只是简单的HTML/JS，这真的很容易，但我对ApacheWicket真的一无所知
页面/html结构如下所示：
结构或布局：
<!-- HTML document -->
<Page>
...
<!-- Content section -->
<div id="content">
<div id="detailsContainer">
...
</div>
<div id="devicesContainer">
...
<div id="contentDevices">
<!-- Other components (ex. table) here that needs to be refreshed after adding/removing device -->
</div>
...
</div>
</div>
</div>
...
</Page>
代码：
...
@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
super.onSubmit(target, form);
laboratoryService.addDevice(this.laboratoryModel.getObject(), selectedDevice.getLabel(), selectedDevice.getValue());
// Refresh laboratory model and update the list of laboratory devices from DB
Laboratory laboratory = laboratoryService.getLaboratory(this.laboratoryModel.getObject().getId());
this.laboratoryModel = new Model<>(laboratory);
// Start: refreshing `contentDevices`
WebMarkupContainer cContent = (WebMarkupContainer) getPage().get("content");
WebMarkupContainer devicesContainer = (WebMarkupContainer) cContent.get("devicesContainer");
Component cDevices = devicesContainer.get("contentDevices");
cDevices.replaceWith(new Device("contentDevices", getMyPageContext(), this.laboratoryModel));
devicesContainer.addOrReplace(cDevices);
cContent.addOrReplace(devicesContainer);
target.add(cContent);
// End refreshing `contentDevices`
// Hide bootstrap modal box
MyUtil.hideBootstrapModalBox(target, "[data-locator=addDeviceModalBox]");
// showCustomAlert - show success message
target.appendJavaScript("showCustomAlert('success', 'Added laboratory device.', true);");
}
...
设备类别：
public class Device extends AbstractMyPagePanel {
private static final long serialVersionUID = 1L;
@Autowired
private LaboratoryService laboratoryService;
private IModel<Laboratory> laboratoryModel;
public Device(String id, MyPageContext myPageContext, IModel<Laboratory> laboratoryModel) {
// `laboratoryModel` is passed until most parent class which is `org.apache.wicket.markup.html.panel.Panel`
super(id, myPageContext, laboratoryModel);
this.laboratoryModel = laboratoryModel;
add(createAddDeviceButton());
add(new AddDeviceModalBox("addDeviceModalBox", myPageContext, this.laboratoryModel));
add(createRowsContainer());
setOutputMarkupId(true);
}
private Component createAddDeviceButton() {
return new WebMarkupContainer("addDeviceButton") {
private static final long serialVersionUID = 1L;
@Override
protected void onConfigure() {
super.onConfigure();
setVisible(isAdmin());
}
};
}
private Component createRowsContainer() {
WebMarkupContainer result = new WebMarkupContainer("rowsContainer") {
private static final long serialVersionUID = 1L;
@Override
protected void onConfigure() {
super.onConfigure();
setVisible(CollectionUtils.isNotEmpty(this.laboratoryModel.getObject().getRoomDevices()));
setOutputMarkupPlaceholderTag(true);
}
};
// This part here is OK, laboratory model and devices are updated
System.out.println("\n");
System.out.println("CREATE-ROW-CONTAINER");
System.out.println("---------------------------------------------");
System.out.println("[device-count]: " + this.laboratoryModel.getObject().getRoomDevices().size());
System.out.println("---------------------------------------------");
System.out.println("\n");
System.out.println("\n");
System.out.println("LABORATORY-DEVICES");
System.out.println("---------------------------------------------");
for (LaboratoryDevice device : this.laboratoryModel.getObject().getRoomDevices()) {
System.out.println("[device]: " + device.getName());
}
System.out.println("---------------------------------------------");
System.out.println("\n");
// This part here is not OK, `populateItem()` is not called
// `rows.children` is null, but `rows.data.transientModelObject` is updated and contains the latest added laboratory device
// Same goes when `add` is used instead of `addOrReplace`, the issue is still there
result.addOrReplace(new ListView<LaboratoryDevice>("rows", this.laboratoryModel.getObject().getRoomDevices()) {
private static final long serialVersionUID = 1L;
@Override
protected void populateItem(ListItem<LaboratoryDevice> item) {
LaboratoryDevice device = item.getModelObject();
item.add(new Label("name", device.getName()));
item.add(new Label("sn", device.getSn()));
item.add(new WebMarkupContainer("removeButton").setVisible(isAdmin()));
item.add(new RemoveLaboratoryDeviceModalBox("removeLaboratoryDeviceModalBox",
getMyPageContext(), item.getModel()));
}
});
return result;
}
}
我知道这很基本，但我在网上找不到任何真正有效的方法：(
谢谢
# 1 楼答案
您应该检查是否存在任何错误：
我猜开发工具中有一个JS错误，说Wicket找不到id为
contentXYZ的HTML元素。如果是这种情况，那么请确保调用cContent.setOutputMarkupId(true)，其中cContent被实例化，即在页面的构造函数中你不需要
cDevices.setOutputMarkupId(true)，因为你从不把cDevices添加到target大多数时候在中创建或更新）替换它时，该属性将在以后使用
onXYZ(AjaxRequestTarget)中调用setOutputMarkupId(true)都太晚了，因为整个页面已经呈现，组件/元素需要呈现一个id属性，当Ajax响应试图找到旧的HTML元素并用新的（在^{