Wicket - Updating ListViews using an AjaxLink

Mischa Dasberg

Consider the following senario: we want to display some data in a table like manner, and we want it to update when we click on a link or button. We do not want to do a complete page refresh, we want it in an ajax way. Also we would like the modify the css for each cell.

In wicket you can use a ListView iterate over a List of Objects and display them in a table like manner.
This blog describes how you can update ListView data and modify the css for each cell.

So how do we start?

Well first we need to create a ListView. Lets call it view.
But before we do that we need a List of objects we want to display. So lets create it.
I use a List of TestObject's.

As you can see below, this isn't very hard.

private ListView view;
private List objects;

objects = Arrays.asList(new TestObject[] {
    new TestObject("one", true), 
    new TestObject("two", false), 
    new TestObject("three", true)});

view = new ListView("view", objects) {
    @Override
    protected void populateItem(ListItem item) {
        Label label = new Label("label", new PropertyModel(item.getModel(), "name"));
        label.setOutputMarkupId(true);
        item.add(label);
    }
};

Next we will create an IndicatingAjaxFallbackLink which is basically a AjaxLink that shows an indicator.

private IndicatingAjaxFallbackLink link;

link = new IndicatingAjaxFallbackLink("link") {
    @Override
    public void onClick(AjaxRequestTarget target) {
        objects = Arrays.asList(new TestObject[] {
            new TestObject("four", false),
            new TestObject("five", true),
            new TestObject("six", false)});
        view.setList(objects);
        target.addChildren(view, Label.class);
    }
};

Thats all. Now see that we add a new List of objects to the ListView. To make sure the ListView is updated we add

target.addChildren(view, Label.class);

instead of

target.addComponent(view);

. As a ListView is a repeater, we cannot updated it, but we can update components in a ListView.

So now we can update a ListView, but how do we change the css for each field?

We add an AttributeModifier. In the populateItem method show above we just add the following

label.add(new AttributeModifier("class", true, new PropertyModel(item.getModel(), "odd") {
    @Override
    public Object getObject() {
        return ((Boolean) super.getObject()) ? "odd" : "even";
    }
}));

The getObject method is overridden, because the method getOdd() on the TestObject returns a boolean. So instead of returning true or false, it now returns "odd" or "even" which are css class styles.

That's it.

I have attached the example project here so you can look into the code yourself.

Comments (16)

  1. [...] Wicket - Updating ListViews Using an AjaxLink Create a table that will update without a full page refresh when a link is clicked. [...]

  2. [...] Wicket - Updating ListViews Using an AjaxLink Create a table that will update without a full page refresh when a link is clicked. [...]

  3. [...] Wicket - Updating ListViews Using an AjaxLink Create a table that will update without a full page refresh when a link is clicked. [...]

  4. [...] Wicket - Updating ListViews Using an AjaxLink Create a table that will update without a full page refresh when a link is clicked. [...]

  5. 50 Excellent AJAX Tutorials | How2Pc - Reply

    December 19, 2008 at 9:37 am

    [...] Wicket - Updating ListViews Using an AjaxLinkCreate a table that will update without a full page refresh when a link is clicked. [...]

  6. 50 Excellent AJAX Tutorials « Rohit Dubal - Reply

    February 16, 2009 at 11:38 am

    [...] Wicket - Updating ListViews Using an AjaxLink Create a table that will update without a full page refresh when a link is clicked. [...]

  7. [...] Wicket - Updating ListViews Using an AjaxLink Create a table that will update without a full page refresh when a link is clicked. [...]

  8. 150 AJAX Tutorials » TemplateLite.com - Reply

    May 14, 2009 at 2:10 am

    [...] Wicket – Updating ListViews Using an AjaxLink – This tutorial shows how to create a table that will update without a full-page refresh when a link is clicked. [...]

  9. [...] Wicket - Updating ListViews Using an AjaxLink - This tutorial shows how to create a table that will update without a full-page refresh when a link is clicked. [...]

  10. [...] Wicket - Updating ListViews Using an AjaxLink - This tutorial shows how to create a table that will update without a full-page refresh when a link is clicked. [...]

  11. [...] Wicket – Updating ListViews Using an AjaxLink Create a table that will update without a full page refresh when a link is clicked. [...]

  12. Daniel Geffert - Reply

    April 1, 2011 at 7:58 pm

    Spot on with this write-up, I truly think this website wants way more consideration. I’ll most likely be again to learn rather more, thanks for that info.

  13. Bindu - Reply

    September 13, 2011 at 8:23 pm

    Thanks for the code! I was looking for something similar like this.

  14. Ferry - Reply

    September 29, 2011 at 11:04 am

    Cool, Thanks for sharing this with us :-)

  15. sc_bant - Reply

    October 27, 2011 at 10:35 am

    thx,guy.

    I forget the ~view.setList(objects);~ mathod.

    the damn mind TAT

  16. André - Reply

    June 26, 2013 at 1:26 am

    This code works if you one label item only. With two items, it does nothing. What about putting other types of items in the listview. This is a common scenario.

Add a Comment