0

Hy Everyone,

I'm a bit confused using wicket, wiquery and SortableAjaxBehavior...

Got a Class which extends BasePanel (TestPanel) I'll create a WebMarkupContainer (ListViewContainer) and in it a ListView (ListItem)...

Then I'm adding a SortableAjaxBehavior to the WebMarkupContainer and the list is Sortable -> everything is fine...

BUT... ... I've got an AjaxLink which updates the ListView onClick if I add the Container to Target the ListView isn't sortable anymore -> getting error in "Wicket Ajax Debug" -> ERROR: TypeError: 'null' is not an object (evaluating '$('#sortable').sortable')

Does anybody have an Idea how to let the ListView be Sort- and updateable?

here my Java Code:

public class TestPanel extends BasePanel {

private static final long serialVersionUID = 1L;

private final static Logger LOG = Logger.getLogger(TestPanel.class);

private final FeedbackPanel feedbackPanel = new FeedbackPanel("feedbackPanel");

private WebMarkupContainer listViewContainer = createListViewContainer("listViewContainer");

public TestPanel(String id) {
    super(id);

    // Adds feedback panel.
    feedbackPanel.setOutputMarkupId(true);
    add(feedbackPanel);

    // AjaxButton
    add(createAjaxLink("loadListLink"));

    // ListViewContainer
    listViewContainer.add(createSortableBehavior());
    add(listViewContainer);
}

/* ---- CONTAINER ---- */

private WebMarkupContainer createListViewContainer (String id) {
    LOG.info("-- CreateListViewContainer");

    listViewContainer = new WebMarkupContainer(id);
    listViewContainer.setOutputMarkupId(true);

    List<String> liste = Arrays.asList("Node A", "Node B", "Node C");
    ListView<String> listView = createListView("listItem", liste);

    listViewContainer.add(listView);

    return listViewContainer;
}


/* ---- LISTS-/DATAVIEWS ---- */

private ListView<String> createListView (String id, List<String> liste) {
    LOG.info("-- CreateListView");
    ListView<String> listView = new ListView<String>(id, liste) {
        private static final long serialVersionUID = 1L;

        @Override
        protected void populateItem(ListItem<String> item) {
            item.setOutputMarkupId(true);
            item.add(new Label("itemTitle", item.getModelObject().toString()));
        }

    };

    return listView;
}


/* ---- AJAX BUTTONS/LINKS ---- */

private AjaxLink<Void> createAjaxLink (String id) {
    LOG.info("-- CreateAjaxLink");
    AjaxLink<Void> ajaxButton = new AjaxLink<Void>(id) {
        private static final long serialVersionUID = 1L;

        List<String> liste = Arrays.asList("Node A 1", "Node B 2", "Node C 3");

        @Override
        public void onClick(AjaxRequestTarget target) {
            LOG.info("ONCLICK");

            ListView<String> listView = createListView("listItem", liste);
            listViewContainer.replace(listView);

            //listViewContainer.add(createSortableBehavior());

            target.add(listViewContainer);
        }
    };

    return ajaxButton;
}

private SortableAjaxBehavior<Component> createSortableBehavior () {
    LOG.info("-- CreateSortableAjaxBehavior");
    SortableAjaxBehavior<Component> sortableBehavior = new SortableAjaxBehavior<Component> () {
        private static final long serialVersionUID = 1L;

        @Override
        public void onReceive(Component arg0, int arg1, Component arg2, AjaxRequestTarget arg3) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onRemove(Component arg0, AjaxRequestTarget arg1) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onUpdate(Component arg0, int arg1, AjaxRequestTarget arg2) {
            LOG.info("SORTABLE UPDATE");                
        }

    };

    sortableBehavior.getSortableBehavior().setConnectWith(".sortableList");

    return sortableBehavior;
}

}

here my HTML:

<div class="testPanel">
<div>
    <a wicket:id="loadListLink">LOAD LIST</a>
</div>

<ul class="sortableList" id="sortable" wicket:id="listViewContainer">
    <li wicket:id="listItem">
      <span wicket:id="itemTitle"></span>
    </li>
</ul>

4

1 回答 1

0

When you are updating your ListView container you are not adding the sortable behaviour again. Try moving

listViewContainer.add(createSortableBehavior());

to 

createListViewContainer (String id)

It'll then look like this:

private WebMarkupContainer createListViewContainer (String id) {
    LOG.info("-- CreateListViewContainer");

    listViewContainer = new WebMarkupContainer(id);
    listViewContainer.setOutputMarkupId(true);
    listViewContainer.add(createSortableBehavior());

    List<String> liste = Arrays.asList("Node A", "Node B", "Node C");
    ListView<String> listView = createListView("listItem", liste);

    listViewContainer.add(listView);

    return listViewContainer;
}
于 2013-09-20T06:57:19.520 回答