Wicket Ajax Error Log: ERROR: Cannot bind a listener for event "click" on element "AjaxCheckBox" because the element is not in the DOM

Question

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

我看到跟这个里面的能见度有关系 post，但我没有得到我必须做的事情，它说，这正在 Wicket 7 中解决，但我仍然运行ning 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 事件。每次点击列时，我都会在控制台中“点击”，但我收到此错误日志：

ERROR: Wicket.Ajax.Call.processComponent: Component with id [[institutTablePanel6]] was not found while trying to perform markup update. Make sure you called component.setOutputMarkupId(true) on the component whose markup you are trying to update.

ERROR: Cannot bind a listener for event "click" on element "institutCheck7" because the element is not in the DOM

ERROR: Cannot bind a listener for event "click" on element "cont8" because the element is not in the DOM

ERROR: Cannot bind a listener for event "click" on element "institutCheck9" because the element is not in the DOM

ERROR: Cannot bind a listener for event "click" on element "conta" because the element is not in the DOM

ERROR: Cannot bind a listener for event "click" on element "institutCheckb" because the element is not in the DOM

ERROR: Cannot bind a listener for event "click" on element "contc" because the element is not in the DOM

ERROR: Cannot bind a listener for event "click" on element "institutCheckd" because the element is not in the DOM

ERROR: Cannot bind a listener for event "click" on element "conte" because the element is not in the 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) 甚至没有按预期使用 CSS display: none; 渲染组件。它只是不存在，所以之后无法修改。但是您可以告诉 Wicket 使用 setOutputMarkupPlaceholderTag(true) 来呈现占位符。 Wicket 然后创建一个不可见的标记，例如<span style="display: none;" id="mypanel1a"></span>，然后在将可见性设置为 true 时与实际组件交换。

Answer 2

给那些确实遇到这个错误的人一个提示，一个常见的错误是使用：

<wicket:container wicket:id="panel"/>

...而不是...

<div wicket:id="panel"/>

...用于放置面板的位置。方法调用 setOutputMarkupId 不会通知您它无法将 id 添加到 wicket:container，因此您的 target.add(panel) 也会失败。

Wicket Ajax Error Log: ERROR: Cannot bind a listener for event "click" on element "AjaxCheckBox" because the element is not in the DOM

Wicket Ajax Error Log: ERROR: Cannot bind a listener for event "click" on element "AjaxCheckBox" because the element is not in the DOM

javascript

ajax

dom

wicket

wicket-6