java - 在 Wicket 中提交表单后的 AjaxFormComponentUpdatingBehaviour 问题

Question

我在使用 Wickets AjaxFormComponentUpdatingBehaviour 时遇到了这样的问题。当您将此设置为表单上的某些组件并向它们添加验证时，在您按下“提交表单”按钮后，假设您收到一个错误，即您的组件未通过验证，之后 ajax 表现不同，不更新模型。

这是代码示例:

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);

因此，如果检查 checkBx，向 changeableTxt 输入一些值，将 someText 留空，然后按提交按钮，将出现错误，该字段需要一些文本。之后，如果我们点击checkBx，它会禁用changeableTxt字段，但它会保留在输入值之前，而不是null。

Answer 1

好吧，让我们开始解释为什么您认为您的代码可以正常工作:AjaxFormComponentUpdatingBehavior 将更新 CheckBox 的模型，但仅更新此模型。这意味着如果您删除代码行 compoundModel.setChangeableTxt(null);

， changeableTxt 甚至会保持为空

因此，如果 Checkbox 应该更改 changeableTxt TextField 的值，它也应该在单击它时提交它所具有的值。您可以通过使用 AjaxFormSubmitBehavior 在 checkBx 和 changeableTxt 周围包装一个 Form 并在单击 CheckBox 时提交此表单来实现这一点。

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;
    }

}
}

使用以下 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>