Question

I’m using a DatePicker (org.apache.wicket.extensions.yui.calendar.DatePicker — Javadoc) in a form. The form consists of two fields. The first field is a dropdown, and the second changes dynamically based on the first. If “text” is selected, a textbox comes up; if “list” is selected, a dropdown menu comes up; and if “date” is selected, a date picker and associated field come up.

Here’s a simplified version of my current code:

DateTextField dateField = new DateTextField("dateField", // ...
DatePicker datePicker = new DatePicker();
dateField.add(datePicker);

fieldOne.add(new OnChangeAjaxBehavior() {
    protected void onUpdate(AjaxRequestTarget target) {
        if (fieldOne.equalsIgnoreCase("list"))
        {
            dateField.setVisible(false);
            // datePicker.setVisible(false); // This line is impossible
            listField.setVisible(true);
            textField.setVisible(false);
        }
        else if { /* similar visibility settings for dates and text */ }
    }
});

The form currently works properly for changing to the date picker. The problem arises when date is selected and then the user selects something else. The date field disappears, but the date picker remains on the screen. Unfortunately, it doesn’t seem to have a setVisible() method, or any equivalent. In fact, it’s not even a true Wicket Component.

How can I make them appear/disappear together? If I can’t set the picker’s visibility directly, can I tie it to the field’s visibility somehow?

Answer 1

By far the easiest yet still fairly maintainable solution is to group the components you want to hide together in a WebMarkupContainer. In the markup you’ll probably want to use a <div> element for the container, but this depends on what you want to hide. (Sometimes the markup itself prevents you from using this method but let’s hope your markup doesn’t. :))

Then just change the visibility of the container.