I am using Datatables jquery table in Wicket. In java code, I am preparing with RepeatingViews the table thead and tbody HTML tags and then I am calling DataTable javascript constructor to create table with paging, sorting and so on.
I want to add the checkbox column to the table. Main checkbox in thead (title of the table) should switch all rows checkboxes in the table.
The problem is pagination, when I click on main checkbox, some checkboxes are not existing in the DOM, because they are on different table pages. Wicket throws me this errors:
ERROR: Wicket.Ajax.Call.processComponent: Component with id [[id187]] 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 "change" on element "checkbox76" because the element is not in the DOM
The code which is bound on main checkbox is:
@Override
public void update(AjaxRequestTarget target, boolean state) {
for (int i = 0; i < rowsCheckboxes.size(); i++) {
CustomCheckbox checkbox = rowsCheckboxes.get(i);
checkbox.setState(state);
target.add(checkbox);
}
}
CustomCheckbox looks like:
public abstract class CustomCheckbox extends Panel {
private static final long serialVersionUID = 1L;
private boolean state;
public CheckBox checkbox;
public CustomCheckbox(String id) {
super(id);
checkbox = new CheckBox("checkbox", new PropertyModel<>(this, "state"));
checkbox.add(new OnChangeAjaxBehavior() {
private static final long serialVersionUID = 1L;
@Override
protected void onUpdate(AjaxRequestTarget target) {
update(target, state);
}
});
setOutputMarkupId(true);
add(checkbox);
}
public abstract void update(AjaxRequestTarget target, boolean state);
public void setState(boolean state) {
this.state = state;
}
}
HTML of this CustomCheckbox:
<wicket:panel>
<span class="custom-checkbox">
<input wicket:id="checkbox" type="checkbox">
<label for="select"></label>
</span>
</wicket:panel>
How can I approach this problem? I would like to switch with main checkbox all checkboxes located on current table page which is shown to user right now.
I have tried this, but without success:
setOutputMarkupId(true);
setOutputMarkupPlaceholderTag(true);
These checkboxes I am using for clone or delete the table items.
Thanks for any answer.
