How to create updateable panel using AjaxLink of Wicket?

Question

I try to realize a link (in fact many links) that update a table in an website using an AjaxLink of Wicket. But I fail, the table is never updated (I have "setOutputMarkupId(true)" and call "setDefaultModelObject" and "addComponent", but there must be something other thats wrong).

How can I realize a panel with a number of links and a table that displays dynamic data, dependent on the link clicked? Can someone give an example (Maybe two links, when the first one is clicked the table displays two random numbers from 1-10, when the second is clicked the table displays random numbers from 1-100)? Without reloading the entire page, but only the html for the table?

Answer 1

Like jboyd was asking do you have code that knows to send the table contents back in the Ajax response?:

final Component tableComponent = ....;
AjaxLink link = new AjaxLink("myButton"){
    public void onClick(final AjaxRequestTarget target) {
        target.addComponent(tableComponent);
    }
};
add(link);

The addComponent piece is the part jboyd is referring to.

Answer 2

There is one such example among the wicketstuff.org examples, the tree/tree table one. The three links at the top change the table.

Answer 3

I don't think you've defined what you are doing very clearly.

Are these 2 tables different implementations? If so, then your code is correct - you have to replace the old component with the new one, then add the new one to the ajax response.

Realistically though, I'd imagine that you have 1 table component implementation.

What you therefore need to do, is something like this:

public class RandomNumberListModel extends LoadableDetachableModel {
    private int upperBound;

    public RandomNumberListModel(int upperBound) {...}

    public void setUpperBound(int upperBound) {...}

    protected Object load() {
        // generate random number list using upper bound
        // return list
    }        
}

...

final MyTableComponent table = new MyTableComponent(new RandomNumberListModel(30));
AjaxLink link = new AjaxLink("myButton") {
    public void onClick(final AjaxRequestTarget target) {
        (RandomNumberListModel)(table.getModel()).setUpperBound(100);
        target.addComponent(table);
    }
};
add(link);

(Edit) I've added a dynamic, reusable model to illustrate how the model would work. There are different ways of implementing this, depending on what you want to be reusable. The key point is that the model generates the list dynamically, i.e. per request, and the upperBound of the number range can be manipulated in the onClick callback.

Answer 4

One possible reason might be that you are not using a 'refreshable' model, but rather fetching the list items and passing them directly to the component, thus the list get's serialized in the session and doesn't get updated.

If this is the case, pass a LoadableDetachableModel (that retrieves the list in it's load method) to the component. I can't be more specific without seeing your code.