Wicket: dynamically add content without the Repeater in the AjaxRequestTarget

Question

I want a large list on my screen, using Wicket.

The list contains Panels with a lot of ajax/js functionality. The list tends to get long, so I build some limitations, just showing the first 10 entries. To get more entries, the user has to press a 'more' link.

However, the items are in a ListView (could be any repeater). If I want to add items to the repeater, Wicket forces me to add the repeater to the AjaxRequestTarget. This results is the complete redraw of the repeater in the browser.

I want to prevent this. I think I might be able to do it by doing this completely from jQuery / javascript; by asking the new 10 entries to be rendered in a invisible div, and then adding them to my list. This seems very un-wicked-y.

Can anyone suggest a better approach?

Answer 1

I faced the same problem and was able to solve it with wicket only: Make a Class derived from GenericPanel (or just Panel) which contains:

• IModel<Long> currentOffsetModel
• ListView
• AjaxLink
• empty div (or any other placeholder element) as WebmarkupContainer
• LoadalbeDetechable Model to load the List for the ListView starting at currentOffsetModel

In the AjaxLink-onClick Method you need to replace the placeholder div with the new Object of your custom class ("replaceWith"), set the AjaxLink visibility to false and the AjaxLink and the new Object to AjaxRequestTarget:

class EndlessListPanel extends Panel {

    WebmarkupContainer placeholder = new WebmarkupContainer("placeholder");

    ...

    AjaxLink<Void> nextListElem = new AjaxLink<Void>("next") {

        private static final long serialVersionUID = 1L;

        @Override
        public void onClick(AjaxRequestTarget target) {
            int offset = offsetModel.getObject().intValue();
            EndlessListPanel next = new NewsPanelList("placeholder",offset + 5);
            placeholder.replaceWith(next);
            setVisibilityAllowed(false);
            target.add(this, next );
        }

        @Override
        protected void onConfigure() {
            // The "if" prevents "previous" EndlessListPanel to query the LDM.
            if (isVisibilityAllowed()) {
                setVisibilityAllowed(!listing.getObject().isReachedEnd());
            }
            super.onConfigure();
        }
    };

    ...
}

Corresponding html:

<wicket:panel>

<wicket:container wicket:id="listItem"/>

<a wicket:id="next">Next</a>

<div wicket:id="placeholder"></div>

</wicket:panel>

Answer 2

Why not use a PageableListView and a PagingNavigator? This seems to do exactly what you want.