javascript - Wicket Ajax 错误日志 : ERROR: Cannot bind a listener for event "click" on element "AjaxCheckBox" because the element is not in the DOM

Question

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

我看到跟这个里面的可见度有关系 post ，但我没有得到我必须做的事情，它说，这正在 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 事件。每次我点击一个列时，我都会在控制台中得到“点击”，但我得到这个错误日志:

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”中的组件绑定(bind)，我不知道如何解决。如果我之前将其设置为可见，我会遇到同样的问题，包括所有元素，这些元素稍后将在工作流中隐藏。

编辑:

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 时与实际组件交换稍后。