Wicket ajax possible to update border without changing body?

Question

I'm trying to implement a Bootstrap Validated Input field with Help-text and validation icons in Wicket. (http://getbootstrap.com/css/#forms-help-text) see example

I've encapsulated the TextField and the ComponentFeedbackPanel (BootstrapFieldFeedbackPanel) with a Border (BootstrapFormGroup), where the validation icon and the form-group css-class are controlled.

Problem is, when i update the whole Border after a keyDown/input event, the Textfield gets updated too and the cursor jumps to the beggining, losing the previous insert position. That doesn't happen with a change event, but then the ajax validation occurs only after I leave the field and not during insertion, as desired. Is there a way to update the Border without actually trigerring the update of the Body contents (Textfield)? Do you have another suggestion of how could I encapsulate the Textfield with markup and still be able to control the attributes of the encapsulating form-group/validation icon without changing the content/status of the Textfield itself?

    myUrl = new TextField<String>("url");
    myUrl.add(new UrlValidator(new String[]{"http", "https"}));
    myUrl.setLabel(new StringResourceModel("lbl.myLink", this, null));
    myUrl
        .setOutputMarkupId(true)
        .add(new AjaxFormComponentUpdatingBehavior("oninput") {
            private static final long serialVersionUID = 1L;

            @Override
            protected void onUpdate(AjaxRequestTarget target) {
                target.add(myLinkFeedback);
                formGroup.setFeedbackStatus(BootstrapFormGroup.VALIDATION_SUCCESS);
                target.add(formGroup);
            }

            @Override
            protected void onError(AjaxRequestTarget target, RuntimeException e) {
                target.add(myLinkFeedback);
                formGroup.setFeedbackStatus(BootstrapFormGroup.VALIDATION_ERROR);
                target.add(formGroup);
            }
        });

    formGroup = new BootstrapFormGroup("formGroup", new StringResourceModel("lbl.myLink", this, null));
    formGroup.setOutputMarkupId(true);
    formGroup.setShowFeedbackStatusIcon(true);
    formGroup.add(myUrl);


    myLinkFeedback = new BootstrapFieldFeedbackPanel("myLinkFeedbackField", myUrl);

    formGroup.add(myLinkFeedback);
    form.add(formGroup);

martin-g martin-g · Accepted Answer · 2016-01-01T21:40:47

You can introduce method like FormGroup#repaint(AjaxRequestTarget) that adds only the children you want to be repainted.

Wicket ajax possible to update border without changing body?

1 Answers