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.
When playing with a component's visibility through Ajax, it's necessary to use setOutputMarkupPlaceholderTag(true)
, in addition to . Notice that setOutputMarkupId(true)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With