Wicket AjaxLink javascript handler shows strange behaviour

Question

I have a ListView that displays a list of Panels, one below the other. Every panel features a button (implemented via AjaxLink) that closes the panel and removes it from the list.

This is how the ListView is initalized and how the panels are created:

panelsList = new ArrayList<MyPanel>();
pnlContainer = new WebMarkupContainer("pnlContainer");

ListView<MyPanel> pnlItems = new ListView<MyPanel>("pnlItems", panelsList) {
    @Override
    protected void populateItem(final ListItem<MyPanel> item) {
        item.add(item.getModelObject());
        item.add(new AjaxLink<Void>("pnlClose") {
            @Override
            public void onClick(AjaxRequestTarget target) {
                panelsList.remove(item.getModelObject());
                target.add(pnlContainer); // repaint panel container
            }
        });
    }
};

pnlContainer.setOutputMarkupId(true);
pnlContainer.add(pnlItems);
add(pnlContainer);

This works so far - the actions that trigger adding new panels (usually also AjaxLinks) do what they should and the new panel is added and displayed correctly. But I have problems getting the close button to fully work.

Please see the following steps:

1) I start the server and navigate to the main page. The ListView is initially populated with one panel.

Close-button-code of this panel:

<a wicket:id="pnlClose" id="pnlClose7" href="javascript:;">Close</a>

Searching the page code for pnlClose7 finds the following javascript code that makes the button work as expected:

Wicket.Ajax.ajax({"u":"./?0-1.IBehaviorListener.0-pnlContainer-pnlItems-0-pnlClose","e":"click","c":"pnlClose7"});;

Note: I do not press the button now, if i would, it would work as expected (thoroughly tested).

2) I trigger an action that opens a second panel. The panel is displayed below the first one as expected.

Close-button of the first panel:

<a wicket:id="pnlClose" id="pnlClosef" href="javascript:;">X</i></a>

Close-button of the second panel:

<a wicket:id="pnlClose" id="pnlClose10" href="javascript:;">X</i></a>

But now, neither searching for pnlClosef nor pnlClose10 finds some javascript code. The buttons (both!) do not work. I can still find the javascript code for pnlClose7.

3) I reload the page via pressing F5.

The button IDs change to pnlClose1a and pnlClose1b. Both IDs have javascript counterparts and work.

4) I press the first button (upper panel, ID pnlClose1a). The panel is closed as expected.

The remaining button's ID changes to pnlClose1c, again without a javascript counterpart. Javascript code for pnlClose1a and pnlClose1b is still present.

To make a long story short, the javascript handlers for my AjaxLinks seem to have shyness issues and only appear after I press F5 or reload the whole page in any other manner. I guess thats because repainting the pnlContainer changes the IDs of the current panels - but why is the linked javascript not updated at the same time? Is there anything I can change in my code to update the whole page without completely reloading it?

Wierd thing is that I am pretty sure this worked before... But I checked the whole class history and can't find any major change that would have triggered that. The ListView-code is mainly static since I added it.

Answer 1

I was had similiar problem. if you have any hardcoded javascript code in your page or panels html file (using <script> tag) remove it and set that js code in renderHead of your panel.