| Panel |
|---|
| borderStyle | solid |
|---|
| title | Table of contents |
|---|
|
|
Initial situation: Paging done without Ajax
Say you have a page with a PagingNavigator and a DataView.
| Code Block |
|---|
DataView dataView = new MyDataView("dataView");
add(dataView);
PagingNavigator pager = new PagingNavigator("pager", dataView);
add(pager);
|
Adding Ajax
Now you want to do the paging be done via Ajax. But simply replacing the PagingNavigator with a AjaxPagingNavigator won't do it - the Page will be updated, but the DataView won't. To accomplish this, you need to do the following:
- surround the PagingNavigation and the DataView with a WebMarkupContainer
- tell the AjaxPagingNavigator to update the WebMarkupContainer
- update your HTML to match the new component hierarchy
| Code Block |
|---|
final WebMarkupContainer dataContainer = new WebMarkupContainer("dataContainer");
dataContainer.setOutputMarkupId(true);
add(dataContainer);
DataView dataView = new MyDataView("dataView");
dataContainer.add(dataView);
AjaxPagingNavigator pager = new AjaxPagingNavigator("pager", dataView) {
@Override
protected void onAjaxEvent(AjaxRequestTarget target) {
target.addComponent(dataContainer);
}
};
dataContainer.add(pager);
|
From a posting of Igor to the wicket-user list