Wicket - Init a Component with Loadable Detachable Model on click event

Question

I am adding ChildPanel in the constructor of Panel. When the Panel loads the child panel is rendered with the data that is returned by getData(). Below is the code.

Panel

public Panel(String aId, IModel<String> model)
    {

        super(aId);

        this.model = model;
        childPanel = new ChildPanel(MID, LoadableDetachableModel.of(this::getData));

        childPanel.setOutputMarkupId(true);
        add(childPanel);

    }
LambdaAjaxButton button = new LambdaAjaxButton("button",
        (_target, _form) -> {

            //

        });

ChildPanel

 public ChildPanel(String aId, LoadableDetachableModel<String> loadableDetachableModel)

    {

        super(aId);

        childModel = loadableDetachableModel;

        component = new WebMarkupContainer(MID_COMPONENT_CONTAINER);
        component.setOutputMarkupId(true);
        add(component);

    }

I want to do such that the ChildPanel only renders when I click a button and never before. How do I define such thing in the onClick event? Also it must not render on initialization.

Answer 1

if you want to avoid component rendering you could try hiding your child panel and make it visible when you click on your AJAX button. You should also use LambdaModel instead of LoadableDetachableModel in order to call getData lazily. Something like this:

public Panel(String aId, IModel<String> model)
{

    super(aId);

    this.model = model;
    childPanel = new ChildPanel(MID, LambdaModel.of(this::getData));
    childPanel.setVisible(false);


    childPanel.setOutputMarkupPlaceholderTag​(true);
    add(childPanel);

}
LambdaAjaxButton button = new LambdaAjaxButton("button",
    (_target, _form) -> {

        childPanel.setVisible(true);
        _target.add(childPanel);
    });