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.

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.