Question

I’m updating a list using wicket. The list will be updated (ajax request is made, the response was send and the list was updated). So far, everything is ok.

After the update of the list I call the javascript/jquery method $(‘ul’).listview(‘refresh’) to (re)add all necessary jquery stylings. But this will not happen. The (updated) list will be displayed unstyled.

Is there any idea, what I’m missing?

The html part:

...
<ul id="sitzungenList" wicket:id="sitzungenListContainer" data-role="listview" data-divider-theme="b" data-inset="true">
    <li wicket:id="sitzungen" data-theme="c">
        <a href="#page2" data-transition="slide">
            <span wicket:id="sitzungName">[Sitzung]</span>
        </a>
    </li>
</ul>
...

The java part (initialization of the list):

...
final WebMarkupContainer sitzungenListContainer = new WebMarkupContainer("sitzungenListContainer");
        sitzungenListContainer.setOutputMarkupId(true);
        sitzungenForm.add(sitzungenListContainer);
        final ListView<Meeting> sitzungenList = new ListView<Meeting>("sitzungen", meetingsService.getAll(Meeting.class)) {
            @Override
            protected void populateItem(ListItem<Meeting> listItem) {
                listItem.add(new Label("sitzungName", listItem.getModelObject().getName()));
            }
        };
        sitzungenListContainer.add(sitzungenList);
...

And finally the update of the list (inside the onSubmit method of an AjaxButton):

...
sitzungenList.setList(meetingsService.getMeetings(sitzungenSearchParam));
target.add(sitzungenListContainer);
target.appendJavaScript("$('ul').listview('refresh')");
...

Answer 1

With Wicket’s AJAX functionality you replace the complete DOM node for the <ul> tag and its children. Therefore JQuery doesn’t recognize the <ul> as a listview. According to the answer to this question you need to call the listview constructor instead of refresh:

target.appendJavaScript("$('ul').listview()");