Question

EDIT:
This question was originally about checkboxes, but I am getting the same behavior with a dropdown list. The code:

productInput = new DropDownChoice<String>("productInput",
                                          new PropertyModel<String>(this, "productSelection"),
                                          products);

productInput.add(new AjaxFormComponentUpdatingBehavior("onchange") {
    @Override
    protected void onUpdate(AjaxRequestTarget target)
    {
        if (productSelection == null) // Breakpoint is set on this line
        {
            updateDropdownsAfterFieldDisabled(1, target);
        }
        else
        {
            updateDropdownsAfterFieldEnabled(1, target);
        }
    }
});

If productInput is not set to required, the breakpoint gets hit every time the list goes from having some value selected to having the blank line option selected. If it is set to required, the breakpoint never gets hit.

---

Is it possible to dynamically/AJAX-ishly change a Wicket form component if it’s being validated with setRequired(true);? Here’s a simple, if contrived, example to show what I mean:

Drive-through carwashes at gas stations usually often three or four levels of service. Each one includes everything provided by the lower levels and tacks on one more coat of wax or an extra rinse or something. UIs for the washes usually have four buttons with lights next to them (example). When a user presses one of the buttons, the corresponding light turns on, along with all the lights of the cheaper levels; the lights for nicer levels turn off. That behavior is modeled by this code:

boolean economy, standard, deluxe, ultimate = false;

CheckBox economyBox = new CheckBox("economyBox",
                                   new PropertyModel<Boolean>(this, "economy"));
// Similar declarations for standardBox, deluxeBox and ultimatebox

OnChangeAjaxBehavior standardChangeListener = new OnChangeAjaxBehavior() {
    protected void onUpdate(AjaxRequestTarget target)
    {
        // If "standard" is activated, also turn on the "economy" light
        if (standard)
        {
            economy = true;
            target.addComponent(economyBox);
        }
        // If "standard" is deactivated, deactivate "deluxe" and "ultimate"
        else if (!standard)
        {
            deluxe = false;
            ultimate = false;
            target.addComponent(deluxeBox);
            target.addComponent(ultimateBox);
        }
    }
};
standardBox.add(standardChangeListener);
// Similar listeners declared for the other three checkboxes

I’ve tested this code — well, the real code that this is a simplified version of — and it works as expected. But add in economyBox.setRequired(true); and the box stops updating dynamically. Is there a way to add validation without breaking the “linked checkbox” behavior?

Answer 1

I can’t see anything wrong here except you have

        target.addComponent(standardBox);

where I think you intended

        target.addComponent(economyBox);

Validation should interoperate with OnChangeAjaxBehavior just fine. I’m quite sure I’ve used both in some forms, though not I think with checkboxes.

I’m not sure the idea of validation with economyBox.setRequired(true); makes sense here though. You’re supplying values, defaulting to false for all the checkboxes, in your model, so there’s no real way for anything to be actually omitted in this context.

A more sensible validation might be that something has to be checked, but that would require a different validator defined for the form as a whole, or for a FormComponent incorporating all your checkboxes.

EDIT:
Based on your edit about seeing the same issue with DropDownChoice, I did an experiment.

There is an example of AjaxFormComponentUpdatingBehavior with DropDownChoice components here. I downloaded the code for this, added

    models.setRequired(true);
    makes.setRequired(true);
    add(new FeedbackPanel("messages"));

and of course added markup for the feedback panel.

It validated the required fields and continued to update the model drop-down based on the value of the make dropdown.

Since this worked fine for me, I’d recommend you try the same, see it work and then compare with your code.