1
votes

I'm using Wicket 8.10.

I have a Wicket Component that I want to dynamically hide or show depending on some external condition. For that I have the following code:

var mccc = new MyCoolCustomComponent("component"); // Custom component I wrote
mccc.setOutputMarkupId(true);
mccc.setOutputMarkupPlaceholderTag(true);
mccc.setVisible(false); //Should be hidden initially

var container = new WebMarkupContainer("container");
container.setOutputMarkupId(true);
container.setOutputMarkupPlaceholderTag(true);
container.add(mccc);

add(container);

var updateTimer = new AbstractAjaxTimerBehavior(Duration.seconds(1)) {
  @Override
  protected void onTimer(AjaxRequestTarget target) {
    if(FooSingleton.instance().isBar()) {
      mccc.setVisible(true);
    } else {
      mccc.setVisible(false);
    }
    target.add(mccc);
  }
};
container.add(updateTimer);

The corresponding HTML looks like this:

<div wicket:id="container" >
    <div wicket:id="component"/>
</div>

What I would expect to happen: The component is hidden initially. When isBar() returns true the component is shown and once it returns false again it is hidden.

What is actually happening: The component is hidden initially. It is shown once isBar() becomes true but does not become invisible once isBar() returns false.


I also thought about using an AttributeModifier to use the CSS display property, but I can't find how to change the value of the modifier.

1
That should work as intended. You could take a look at your browser's network tab and check for the content of the Ajax response - this way you see whether the problem lies in the browser or on the server. - svenmeier

1 Answers

1
votes

I solved it with CSS:

mccc.add(new AttributeModifier("style",
  () -> {
    if (FooSingleton.instance().isBar()) {
      return "";
    }
    return "display: none;";
  }));

I'm sure the solution is not great, but it works for now.