Question

I have a dropdown component added on a page. the purpose of this dropdown is to change the type of input form that is rendered. for example, different forms have different required fields, editable fields, etc.

public final class Test extends WebPage
{

    CustomPanel currentPanel = new MeRequest("repeater",FormType.MIN);

    public Test(PageParameters parameters)
    {
        add(currentPanel);         

        DropDownChoice ddc = new DropDownChoice("panel", new PropertyModel(this, "selected"), panels, choiceRenderer);
        ddc.add(new AjaxFormComponentUpdatingBehavior("onchange") {
            protected void onUpdate(AjaxRequestTarget target) {
                System.out.println("changed");
                currentPanel = new MeRequest("repeater",FormType.PRO);
                target.add(currentPanel);
            }
        });
        add(ddc);
    }

i’ve tried various options with limited results. the only real success has been updating the model, but what i really want to do is change how the components behave.

any thoughts on what i’m missing?

Answer 1

1) If you want to replace one panel with another you may just do the following.

First of all, you should output the markup id of the original panel:

currentPanel.setOutputMarkupId(true);

And then in the ajax event handler write something like that:

protected void onUpdate(AjaxRequestTarget target) {
    CustomPanel newPanel = new MeRequest("repeater", FormType.PRO);
    currentPanel.replaceWith(newPanel);
    currentPanel = newPanel;
    currentPanel.setOutputMarkupId(true);
    target.addComponent(currentPanel);
}

In this case with every change of dropdown choice you add new panel to the page and you remove old panel from the page.

2) But I would proposed a slightly different approach to your problem. You should move the construction logic of your panel to the onBeforeRender() method:

public class MeRequest extends Panel {

    private FormType formType;

    public MeRequest(String id, FormType formType) {
        super(id);
        this.formType = formType;

        // don't forget to output the markup id of the panel
        setOutputMarkupId(true);

        // constructor without construction logic
    }

    protected void onBeforeRender() {
        // create form and form components based on value of form type
        switch (formType) {
            case MIN:
                // ...
                break;
            case PRO:
                // ...
                break;
        }            

        // add form and form components to panel
        addOrReplace(form);
        form.add(field1);
        form.add(field2);
        // ...

        super.onBeforeRender();
    }

    public void setFormType(FormType formType) {
        this.formType = formType;
    }
}

Then you’ll be able to only change type of the panel in the ajax event:

protected void onUpdate(AjaxRequestTarget target) {        
    currentPanel.setFormType(FormType.PRO);
    target.addComponent(currentPanel);
}

Thus we rebuilt the original panel without recreating it.