Wicket Label not updated / remains invisible

Question

I am trying to implement Breadcrumb Navigation on a WebPage that exchanges a content Panel via ajax.

It ends up looking like this: Home >> Page >> Panel

Here is my page code:

public MyPage() {
    super();
    contentContainer = new WebMarkupContainer("contentContainer");
    contentContainer.setOutputMarkupId(true);
    add(contentContainer);
    contentContainer.add(content = createContentPanel());   

    breadCrumbContainer = new WebMarkupContainer("breadcrumbContainer");
    breadCrumbContainer.setOutputMarkupId(true);
    add(breadCrumbContainer);   

    final AjaxLink panelLink = new AjaxLink("panelLink") {

        @Override
        public void onClick(final AjaxRequestTarget target) {
            replaceContentPanel(getOverviewPanel(), target);
        }

        @Override
        public boolean isVisible() {
            return !(content instanceof OverviewPanel);
        }
    };
    breadCrumbContainer.add(panelLink);
    panelLink.add(new Label("panelLabel", new Model<String>() {
        @Override
        public String getObject() {
            //some dynamic content for example:
            return contentPanel.getClass().getName();
        }
    }));  
}

public void replaceContentPanel(final Component replacer, final AjaxRequestTarget target) {
    content.replaceWith(replacer);
    content = replacer;
     if (target != null) {           
        target.add(contentContainer);
        target.add(breadCrumbContainer);
    }
}

The Home and Page Label are easy. The one for Panel needs to be updated everytime I updated the content Panel of the WebPage. I was sure that the target.add(breadCrumbContainer); line was going to do this. However it is empty. The Label shows nothing.

I was hoping to find the answer - which is probably obvious - while writing up the question, but it still eludes me, so I am hoping someone here spots my mistake.

Glycol

I wonder, why not use the wicket breadcrumb components. Check an example at the wicketstuff page: wicketstuff.org/wicket/breadcrumb – Quantic

That is a good idea I'll look into it. However I still wonder why the label isn't displaying? – Glycol

Answer 1

When playing with a component's visibility through Ajax, it's necessary to use setOutputMarkupPlaceholderTag(true), in addition to setOutputMarkupId(true). Notice that setOutputMarkupPlaceholderTag(true) will automatically imply setOutputMarkupId(true).

The reasons to do so are that when a component gets refreshed through Ajax (adding it to the AjaxRequestTarget), Wicket returns the refreshed markup in the Ajax response, so that it will be replaced via JS-DOM API through the Ajax callback method. So, for the JS function that will replace the received markup to work, it's necessary to have a reference to the DOM node to replace (an HTML id attribute). That's why setOutputMarkupId(true) is needed.

When changing visibility, if the component is non-visible, Wicket will not generate any markup for the component, which is great, but has a drawback. If an invisible component turns out to be visible in a following ajax request, its markup will be effectively returned in the Ajax response. But, since the component was not visible, it will not even exist in the original markup, and it will be impossible to replace the DOM node at callback time. That's where the setOutputMarkupPlaceholderTag(true) method enters into action, wrapping the maybe-not-visible component in a placeholder tag (i.e. a <div>), that will always be rendered with the proper HTML id attribute.

Hardiness

If this really is the issue, you should be getting a javascript error during the execution of the callback method, in a document.getElementById(id) due to id's inexistence in the DOM. – Lumbering

Xavi López is correct but you don't need to set setOutputMarkupPlaceholderTag(true) in addition to setOutputMarkupId(true). Just the first is enough since it will set the second to true as well. – Unhand

yours sadly wasn't the solution nevertheless I learned something and that is always a good thing. I found out that the label is not displayed at all even when not playing with visibility. so I messed up something different. – Glycol