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

Question

Hey when I run my program, I want to dynamically add Panels to the mainpage and therfore work with "setVisible(boolean)". But not I get the error:
ERROR: Cannot bind a listener for event "click" on element "institutCheck7" because the element is not in the DOM
In the Ajax Debugger.

I saw that it has something to do with the visibility in this post, but I didn't get what I have to do, it says, that this is being resolved in Wicket 7, but I'm still running 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);
}   

I override the newRowItem method to add an onClick event. I get "click" in the console each time I hit a column, but I get this error log:

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

Those error all bind with components in "myPanel", I don't know how to resolve this. If I set it to visible earlier I get the same problem, including all elements, which will be hidden later in the workflow.

Edit:

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);

}}

I edited my setSelectedKontakt method like this:

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

to trigger the change if necessary. The problem is target.add(myPanel); won't trigger populateItem again.

Answer 1

The error message says it pretty clearly and a look into the DOM tells that the markup for the panel is not there. Thats because setVisible(false) doens't even render the component with CSS display: none; as expected. It's just not there so it can't be modified afterwards. But you can tell Wicket to render a placeholder instead with setOutputMarkupPlaceholderTag(true). Wicket then creates an invisible markup e.g. <span style="display: none;" id="mypanel1a"></span>, which then is swaped with the real component when setting the visiblity to true later.