AjaxFormComponentUpdatingBehaviour issue after Form submitting in Wicket

Question

I have such problem with Wickets AjaxFormComponentUpdatingBehaviour. When you set this to some components on the form, and add validation to them, after you press "Submit form" button, and, lets say, you get an error, that your component has not passed validation, after that ajax is behaving different, does not update models.

Here is code example:

TextField someText = new TextField("someTextId");
someText.setRequired(true); //added validation on requireness
CheckBox checkBx = new CheckBox("checkBxId");
TextField changeableTxt = new TextField("changeableTxtId");
changeableTxt.setEnabled(false);

checkBx.add(new AjaxFormComponentUpdatingBehaviour("onclick"){
protected void onUpdate(AjaxRequestTarget target) {
    if(compoundModel.isCheckBx()){
         changeableTxt.setEnabled(true);
         target.addComponent(changeableTxt);
    }else{
         compoundModel.setChangeableTxt(null);
         changeableTxt.setEnabled(false);
         target.addComponent(changeableTxt);
    }
  }
});
Form form = new Form("form", compoundModel);
form.add(someText, checkBx, changeableTxt);
add(form);

So if check the checkBx, input some value to changeableTxt, leave someText empty and press submit button, error will appear, that field someText is required. After that, if we click on checkBx, it will make changeableTxt field disabled, but it will leave before the input value inside, instead of null.

Solution

Well let's start with explaining why you might think your code is working: The AjaxFormComponentUpdatingBehavior will update the model of your CheckBox but only this model. That means that the changeableTxt will even stay empty if you remove the code line compoundModel.setChangeableTxt(null);

So if the Checkbox is supposed to change the value of the changeableTxt TextField it should submit the value it has while clicking it as well. You can achieve this by wrapping a Form around checkBx and changeableTxt and submit this form when click on the CheckBox by using a AjaxFormSubmitBehavior.

public class TestingPanel extends Panel {
    public TestingPanel(String id) {
    super(id);

    final CompoundModel compoundModel = new CompoundModel();

    final Form<CompoundModel> form = new Form<CompoundModel>("form",
            new CompoundPropertyModel<CompoundModel>(compoundModel)) {
        @Override
        protected void onValidate() {
            System.out.println("validate: "
                    + compoundModel.getChangeableTxt());
            System.out.println("validate: "
                    + getModel().getObject().getChangeableTxt());

            super.onValidate();
        }
    };
    form.setOutputMarkupId(true);
    add(form);

    TextField someText = new TextField("someText");
    someText.setRequired(true); // added validation on requireness
    final CheckBox checkBx = new CheckBox("checkBx");
    final TextField changeableTxt = new TextField("changeableTxt");
    changeableTxt.setOutputMarkupId(true);
    changeableTxt.setEnabled(false);

    Form checkBoxForm = new Form("checkBoxForm");
    form.add(checkBoxForm);

    AjaxFormSubmitBehavior submitBehavior = new AjaxFormSubmitBehavior(
            checkBoxForm, "onclick") {

        @Override
        protected void onSubmit(AjaxRequestTarget target) {
            if (checkBx.getModelObject() == true) {
                changeableTxt.setEnabled(true);
                target.add(changeableTxt);
            } else {
                compoundModel.setChangeableTxt(null);
                changeableTxt.setEnabled(false);
                target.add(changeableTxt);
            }

        }

        @Override
        protected void onError(AjaxRequestTarget target) {

        }
    };
    checkBx.add(submitBehavior);
    checkBoxForm.add(checkBx, changeableTxt);

    AjaxFormComponentUpdatingBehavior updateBehavior = new AjaxFormComponentUpdatingBehavior(
            "onclick") {
        protected void onUpdate(AjaxRequestTarget target) {
            if (compoundModel.isCheckBx()) {
                changeableTxt.setEnabled(true);
                target.addComponent(changeableTxt);
            } else {
                // compoundModel.setChangeableTxt("");
                changeableTxt.setEnabled(false);
                target.add(changeableTxt);
            }
        }
    };

    form.add(someText);

    FeedbackPanel feedbackPanel = new FeedbackPanel("feedbackPanel");
    form.add(feedbackPanel);

    AjaxSubmitLink submit = new AjaxSubmitLink("submit", form) {

        @Override
        protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
            target.add(form);
        }

        @Override
        protected void onError(AjaxRequestTarget target, Form<?> form) {
            target.add(form);

        }
    };
    add(submit);

}

class CompoundModel implements Serializable {

    private boolean checkBx = false;

    private String someText = null;

    private String changeableTxt = null;

    public boolean isCheckBx() {
        return checkBx;
    }

    public void setCheckBx(boolean checkBx) {
        this.checkBx = checkBx;
    }

    public String getSomeText() {
        return someText;
    }

    public void setSomeText(String someText) {
        this.someText = someText;
    }

    public String getChangeableTxt() {
        return changeableTxt;
    }

    public void setChangeableTxt(String changeableTxt) {
        this.changeableTxt = changeableTxt;
    }

}
}

with the following html:

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
    <form wicket:id="form">
        <div wicket:id="feedbackPanel" />
        <input type="text" wicket:id="someText"  /><br />
        <form wicket:id="checkBoxForm">
            <input type="checkbox" wicket:id="checkBx" /><br />
            <input type="text" wicket:id="changeableTxt" /><br />
        </form>
    </form>
    <a wicket:id="submit">submit</a>
</wicket:panel>

Comments

[Gytis]

Ive did everything, as you said, Thorsten, but it appears, that, when I click checkBox it makes textfield enabled, but when I click it once again, it doesnt make textfield disabled and null

[Thorsten Wendelmuth]

I will check as soon as I get home. I will provide my complete java & html file so we can see where we are off track

[Gytis]

Well, this aint working normal, my forms doesnt change on click, but I found other way to resolve this issue. I create new items, and set some value to them, so it is not old components, that do not update after submit, but new fresh ones.