wicket 6.0.0-beta2 Updating content of DataTable when submitting a form with AjaxButton - ajax

Question

I want to change the content of a DataTable depending on the content of a form (think of it as a searchbar functionality). I used to do that in wicket 1.5.x but I can not seem to make it work in wicket 6.0.0-beta2. It does not seem to enter in the onSubmit method of the AjaxButton. Everything else works just fine, every components render correctly and the dataTable is filled with the correct data when the page load, but when I click the button, nothing happens.
Any help would be greatly appreciated. Here is what my code look like :
The dataTable :
public SubscriberPage(PageParameters parameters) {
super(parameters);
add(new SearchForm("searchForm"));
List<IColumn<Subscriber, String>> columns = new ArrayList<IColumn<Subscriber, String>>();
columns.add(new PropertyColumn<Subscriber, String>(new Model<String>("Telephone Number"),
"tn",
"tn"));
[...]
columns.add(new PropertyColumn<Subscriber, String>(new Model<String>("Initialized MB"),
"initializedMB"));
table = new AjaxFallbackDefaultDataTable<Subscriber, String>("table",
columns,
subscriberDataProvider,
40);
table.setOutputMarkupId(true);
add(table);
}
and here is the form with the AjaxButton:
private class SearchForm extends Form<String> {
private static final long serialVersionUID = 1L;
private String tnModel;
private Label tnLabel = new Label("tnLabel", "Telephone Number :");
private TextField<String> tn;
public SearchForm(String id) {
super(id);
tn = new TextField<String>("tnTextField", new PropertyModel<String>(this, "tnModel"));
tn.setOutputMarkupId(true);
add(tnLabel);
add(tn);
AjaxButton lSearchButton = new AjaxButton("searchButton") {
private static final long serialVersionUID = 1L;
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
SubscriberFilter filter = new SubscriberFilter();
target.add(table);
if (!(tn.getValue() == null) && !tn.getValue().isEmpty()) {
filter.setTn(tn.getValue());
}
// giving the new filter to the dataProvider
subscriberDataProvider.setFilterState(filter);
}
#Override
protected void onError(AjaxRequestTarget target, Form<?> form) {
// TODO Implement onError(..)
throw new UnsupportedOperationException("Not yet implemented.");
}
};
lSearchButton.setOutputMarkupId(true);
this.setDefaultButton(lSearchButton);
add(lSearchButton);
}
}

Answer 1

The components that you want to refresh need to be added in a container. When you submit, the container needs to be added to target. This way your components will be refreshed. Something like:
WebMarkupContainer outputContainer = new WebMarkupContainer("searchResult");
outputContainer.setOutputMarkupId(true);
outputContainer.add(table);
add(outputContainer);
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
//change table ..... stuff ..... ...
//refresh container
target.add(outputContainer);
}
<div wicket:id="searchResult"></div>