Wicket Ajax 错误日志：错误：无法为元素“AjaxCheckBox”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

Question

嘿，当我运行我的程序时，我想动态地将面板添加到主页，然后使用“setVisible(boolean)”。但不是我收到错误：
错误：无法为元素“institutCheck7”上的事件“click”绑定侦听器，因为该元素不在
Ajax 调试器中的 DOM 中。

我看到它与这篇文章中的可见性有关 ，但我没有得到我必须做的事情，它说，这正在 Wicket 7 中解决，但我仍在运行 6.20。

adminUIForm.add(myPanel= new MyPanel("myPanel", allThings));
    myPanel.setOutputMarkupId(true);
    myPanel.setVisible(false);
    //Note: Setting the OutputMarkupId allows actions such as setting components in/visible
    
    List<IColumn<ContactInfo, String>> columns = new ArrayList<IColumn<ContactInfo, String>>();
    columns = initializeColumns(columns);

    DataTable<ContactInfo, String> datatable = new DataTable<ContactInfo, String>("datatable", columns, provider, 10){
        private static final long serialVersionUID = 1L;

        @Override
        protected Item<ContactInfo> newRowItem(final String id, final int index,
                final IModel<ContactInfo> model) {
            Item<ContactInfo> rowItem = new Item<ContactInfo>(id, index, model);
            rowItem.add(new AjaxEventBehavior("onclick") {

                private static final long serialVersionUID = 1L;

                @Override
                protected void onEvent(AjaxRequestTarget target) {
                    System.out.println("click");
                    myPanel.setSelectedKontakt(model);
                    myPanel.setVisible(true);
                    target.add(myPanel);
                }
            });
            return rowItem;
        }
    };
    setTableProperties(datatable);
    adminUIForm.add(datatable);
}   

我覆盖了 newRowItem 方法以添加一个 onClick 事件。每次我点击一列时，我都会在控制台中“点击”，但我收到以下错误日志：

错误：Wicket.Ajax.Call.processComponent：尝试执行标记更新时未找到 ID 为 [[institutTablePanel6]] 的组件。确保您在要更新其标记的组件上调用了 component.setOutputMarkupId(true)。

错误：无法为元素“institutCheck7”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

错误：无法为元素“cont8”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

错误：无法为元素“institutCheck9”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

错误：无法为元素“conta”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

错误：无法为元素“institutCheckb”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

错误：无法为元素“contc”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

错误：无法为元素“institutCheckd”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

错误：无法为元素“conte”上的事件“click”绑定侦听器，因为该元素不在 DOM 中

这些错误都与“myPanel”中的组件绑定，我不知道如何解决这个问题。如果我更早地将它设置为可见，我会遇到同样的问题，包括所有元素，这些元素稍后将在工作流程中隐藏。

编辑：

public class MyPanel extends Panel {
private static final long serialVersionUID = 1L;
private Form<Void> institutForm = new Form<Void>("institutForm");
private ListView<Institut> listView;
private IModel<ContactInfo> selectedKontakt;
private Set<Institut> allInstitut;

@Override
protected void onModelChanged() {
    //TODO maybe here
    super.onModelChanged();
}

public InstitutTablePanel(String id, final Set<Institut> allInstitut) {
    super(id);
    this.allInstitut = allInstitut;

    this.add(institutForm);

    List<Institut> allInstitutList = new ArrayList<Institut>(allInstitut);

    institutForm.add(listView = new ListView<Institut>("listView", allInstitutList) {

        private static final long serialVersionUID = 1L;

        protected void populateItem(final ListItem<Institut> item) {
            final IModel<Boolean> checked = Model.of(Boolean.FALSE);
            final IModel<String> expandState = Model.of("+");
            @SuppressWarnings("unused")
            final Label institutLabel;
            final Institut institut = item.getModelObject();
            // Define variables which concern only one item in populateItem
            
            final WebMarkupContainer div = createMarkUpContainer("cont");
            final WebMarkupContainer container = createMarkUpContainer("container");

            container.setEnabled(false);
            
            compareInstitute(checked, institut, container);
            item.add(container);
            
            div.add(new AjaxEventBehavior("onclick") {
                private static final long serialVersionUID = 1L;

                @Override
                protected void onEvent(AjaxRequestTarget target) {
                    expandOrCollapse(expandState, container);
                    target.add(institutForm);
                }
            });

            item.add(div);
            div.add(new AjaxCheckBox("institutCheck", checked) {
                private static final long serialVersionUID = 1L;

                @Override
                protected void onUpdate(AjaxRequestTarget target) {

                    //Not Important for this
                    target.add(institutForm);
                }
            });
            container.add(new ErhebungMatrixPanel("erhebungMatrix", institut, selectedKontakt));
            container.setVisible(false);
            div.add(institutLabel = new Label("institutLabel", new PropertyModel<Institut>(institut, "langName")));
        }
    });
    listView.setOutputMarkupId(true);
    listView.setReuseItems(true);
    institutForm.setOutputMarkupId(true);

}}

我像这样编辑了我的 setSelectedKontakt 方法：

public void setSelectedKontakt(IModel<ContactInfo> model) {
    this.selectedKontakt = model;
    modelChanged();
}

必要时触发更改。问题是target.add(myPanel);不会再次触发 populateItem。

Answer 1

错误消息非常清楚地说明了这一点，查看 DOM 会发现面板的标记不存在。那是因为setVisible(false)甚至没有display: none;按预期使用 CSS 渲染组件。它只是不存在，所以之后无法修改。但是您可以告诉 Wicket 使用setOutputMarkupPlaceholderTag(true). Wicket 然后创建一个不可见的标记，例如<span style="display: none;" id="mypanel1a"></span>，然后在将可见性设置为true稍后时与真实组件交换。