Wicket component won't refresh via AJAX

Question

I have a Wicket page with some components that should be updated via AJAX. I have the following AjaxBehavior:

private class MyAjaxBehavior extends AbstractDefaultAjaxBehavior {

        @Override
        public void renderHead(IHeaderResponse response) {
            super.renderHead(response);
            response.renderOnLoadJavascript("wicketAjaxPost(\"" + getCallbackUrl() + "\")");
        }

        @Override
        public void onConfigure(Component component) {
            firstComponent.setOutputMarkupId(true);
            secondComponent.setOutputMarkupId(true);
        }

        @Override
        protected void respond(AjaxRequestTarget target) {
            firstComponent.replaceWith(createFirstComponent());
            target.addComponent(firstComponent);

            secondComponent.replaceWith(createSecondComponent());
            target.addComponent(secondComponent);
        }
    }

And I have a component hierarchy like this:

Page
- fragment1
  - fragment1-1
    - firstComponent
- secondComponent

The problem is firstComponent never refreshed after AJAX callback. secondComponent is updated correctly. I tried to move firstComponent to frament1-1 (just experiment) and it worked! I tried to use some extra fragments to wrap firstComponent but it didn't help.

I tried to debug Wicket's AjaxRequestTarget.respondComponent(). There is the following code:

        // Initialize temporary variables
        final Page page = component.findParent(Page.class);
        if (page == null)
        {
            // dont throw an exception but just ignore this component, somehow
            // it got
            // removed from the page.
            // throw new IllegalStateException(
            // "Ajax request attempted on a component that is not associated
            // with a Page");
            LOG.debug("component: " + component + " with markupid: " + markupId +
                " not rendered because it was already removed from page");
            return;
        }

page is null here for both firstComponent and secondComponent but the second one somehow gets re-rendered.

Any ideas why firstComponent is not re-rendered? Where should I dig? I use Wicket 1.4.22.

UPD

I tried to add the new component to target and not the old one. It creates the new component on the page but doesn't refresh the old one. So I have two components on the page instead of one. Also it breaks HTML markup structure for some reason. Like this:

<div>
    <div id="generated">new component is added here</div>
    <table>
        ...
        <tr>old component</tr>
    </table>
</div>

My wicket markup for firstComponent looks like this:

<div>
    <table class="summary" style="width: 100%">
        <tr>
            <div wicket:id="firstComponent" />
        </tr>
    </table>
</div>

...

<wicket:fragment wicket:id="firstComponentFragment">
    <th>title</th>
    <td><span wicket:id="someText"></span></td>
</wicket:fragment>

So you can see the new component is added outside the table.

Answer 1

Sometimes it is easier to add a parent component (e.g. the Form itself) to the ajax response target so you are sure everything beneath it is updated. Thus no duplicates or missing updates. Updating just a special component is only required if you need the performance in that case. Even though you could define a wrapper container that you update just to make sure old markup gets removed.

Answer 2

You'll have to update the newly created component:

@Override
protected void respond(AjaxRequestTarget target) {
    Component old = firstComponent;
    firstComponent = createFirstComponent();
    old.replaceWith(firstComponent);
    target.addComponent(firstComponent);
}

Update: You cannot have a <div> inside a <table> tag, or the browser will append the update markup outside of the table.