Wicket - Update item inside listview with ajax timer - ajax

Question

There is an example of a world clock on wicket-example http://www.wicket-library.com/wicket-examples/ajax/world-clock?0 .
I tried the same, but inside a list-view.
final DataView<LongRunningTask> dataView = new DataView<LongRunningTask>("sorting", adp) {
private static final long serialVersionUID = 1L;
#Override
protected void populateItem(final Item<LongRunningTask> item) {
...
final Label clock = new Label("timer", getCounter().getObject());
item.add(clock);
clock.setOutputMarkupId(true);
add(new AbstractAjaxTimerBehavior(Duration.seconds(1)) {
#Override
protected void onTimer(AjaxRequestTarget target) {
target.add(clock);
}
});
...
}
}
};
But this is not working. If I do
add(new AjaxSelfUpdatingTimerBehavior(Duration.seconds(1)));
inside the Page itself, then it works. But I don't want to refresh the page every second, I just want to refresh the one item (clock) inside the listView.
Any chance how I can make this work?

Answer 1

The simplest solution to this problem is to add the Behavior to the clock instead of the surrounding container.
You're adding the behavior to the DataView once per row. Since DataViews can't be updated via Ajax, this is bound to fail. Updating the clock component itself instead works.
final DataView<LongRunningTask> dataView = new DataView<LongRunningTask>("sorting", adp) {
private static final long serialVersionUID = 1L;
#Override
protected void populateItem(final Item<LongRunningTask> item) {
...
final Label clock = new Label("timer", getCounter().getObject());
item.add(clock);
clock.setOutputMarkupId(true);
clock.add(new AbstractAjaxTimerBehavior(Duration.seconds(1)) {
#Override
protected void onTimer(AjaxRequestTarget target) {
target.add(clock);
}
});
...
}
}
};
After having a second look at this, I think there is another culprit:
final Label clock = new Label("timer", getCounter().getObject());
I don't know exactly what getCounter().getObject() does but chances are that it doesn't return a model...
final Label clock = new Label("timer", new PropertyModel(this, "counter"));
should be a better fit here. You might habe to replace "this" with an approprately prefixed version to make sure the container defining getCounter() is adressed.
If this doesn't work, have a look at your AjaxDebugWindow. You should see data coming in every second. If it doesn't your component isn't updated. If the data doesn't change, your model isn't updated. Armed with this, you should be able to fix this easily.

Answer 2

You have to refresh the DataView, todo this add it to a WebMarkupContainer and target the WebMarkupContainer with the ajax timer behavior.
A second way could be to add the label and ajax timer behavior to a new Panel. Then add that panel to your DataView. Im not sure if this way would work, as i've never tried it before but its worth a go.