Question

I have a ListView within a panel that has vertical scrolling enabled and absolute positioning using css. When I select an IndicatingAjaxFallbackLink that was added to the listView it updates other panels on the page to provide futher information/options for the listItem. It also refreshes the listView to add a css class to highlight the selected listItem. I am trying to add an anchor to the listView so that it will render scrolled to display the selected listItem.

Problem: When I select an item down the list the listView will reload scrolled to the top of the panel, instead of to selected item. Is this possible without a url redirect & full page reload?

markup:

<div wicket:id="psbContainer" style="position: absolute; top: 325px; height: 300px; overflow-y: auto; left: 4px; right: 305px;">
    <table width="100%">
        <tr wicket:id="psbList" valign="top">
            <td><a wicket:id="viewRelated"><span wicket:id="psbNum"/></a></td>
            <td wicket:id="summary"/>
            <td wicket:id="psbMilestone"/>
            <td wicket:id="dueDate"/>
            <td wicket:id="devCount"/>
            <td wicket:id="activeCount"/>
            <td wicket:id="ccCount"/>
            <td wicket:id="team"/>
        </tr>
    </table>
</div>

java:

    psbListView = new ListView("psbList", psbList) {
        protected void populateItem(ListItem listItem) {
            final Space psb = (Space) listItem.getModelObject();
            if(psb.equals(psbSelected)) {
                listItem.add(selected);
            }
            // viewRelated ========================================================
            IndicatingAjaxFallbackLink viewRelated = new IndicatingAjaxFallbackLink("viewRelated") {
                public void onClick(AjaxRequestTarget target) {
                    psbSelected = psb;
                    target.addComponent(pslpContainer);
                }
            };
            this.setOutputMarkupId(true);
            this.setMarkupId(psb.getPsbNum());
            viewRelated.setAnchor(this);
            viewRelated.add(new Label("psbNum", new Model(psb.getPsbNum())));
            listItem.add(viewRelated);
            ...

Answer 1

Why not just update the client side css styling using pure javascript in the AjaxRequestTarget? Probably not more than

ListItem<?> previousSelected = ...;
ListItem<?> currentSelected = ...;

target.appendJavaScript("document.getElementById('" + previousSelected.getMarkupId() + "').className=\"\";");
target.appendJavaScript("document.getElementById('" + currentSelected.getMarkupId() + "').className=\"selected\";");

This way you don’t have to update the whole listview to just change some classes.