WICKET: control over the visibility of components when the CheckBox changes

Question

WICKET: control over the visibility of components when the CheckBox changes

I am using a wicket.

Does anyone know how to control the visibility of components in a form by clicking on a checkBox component and how to get the boolean value of the checkbox state when the form is submitted (true or false, depending on checked or not).
I want to do something like this:

TextField nameField = new TextField("name");

public StateDB() {
final AjaxCheckBox searchByFio = new AjaxCheckBox("searchByFio", new PropertyModel(this, "checkBoxValue")) {
            @Override
            protected void onUpdate(AjaxRequestTarget target) {
                nameField.setVisible(checkBoxValue);
                target.add(nameField);
            }
        };

Form form = new Form("form");

nameField.setOutputMarkupPlaceholderTag ( true );
form.add(nameField);
add(form);
}

But the result is not what I expected. It just changes the html element like this. From:

<input type="text" wicket:id="lastName" id="lastName" required="" value="" name="lastName">

To:

<input id="lastName" style="display:none">

and vice versa

+3

java checkbox wicket form-submit components

Aybek Kokanbekov 21 Aug 14 at 9:02 am

source to share

1 answer

Michael Zhavzharov · Accepted Answer · 2014-08-21T09:18:02+0000

To update any visibility of a component with a checkbox, you can use "AjaxCheckBox", for example:

//somewhere in the class create model variable:
boolean checkBoxValue = true;

//this is your hideable component
Label someComponent;

...
//and add PropertyModel for checkbox:
AjaxCheckBox checkBox = new AjaxCheckBox("checkBox", new PropertyModel(this, "checkBoxValue")) {
        @Override
        protected void onUpdate(AjaxRequestTarget target) {
                //if checkbox is checked, then our component is shown
                someComponent.setVisible(checkBoxValue);
                target.add(someComponent);
        }
};

...
//this is your component to update
someComponent = new Label("someComponent", "some text");

//this method allows you to hide/show component with ajax updates.
someComponent.setOutputMarkupPlaceholderTag ( true );

To get the checkBox value after submitting - you can check the value checkBoxValue

.

UPDATE

In fact, you can override the method of the hidden component onConfigure()

to set its visibility according to 'checkBoxValue' (this is just another way to get this, it might be preferable):

   someComponent = new Label("someComponent", "some text")
   {
       @Override
       protected void onConfigure() {
          setVisible ( checkBoxValue ); 
       }
   };

If you do it like this, you can remove the someComponent.setVisible(checkBoxValue);

code from the methodAjaxCheckBox#onUpdate()

UPDATE 2

A component WebMarkupContainer

allows you to wrap some components. And when he hides, then they are really removed from the markup. But the markup for the container will exist with style display:hidden

anyway.

Create a container somewhere like:

WebMarkupContainer container = new WebMarkupContainer ( "cont" );
//we will hide this container, so we can replace  someComponent.setOutputMarkupPlaceholderTag ( true ); by this
container.setOutputMarkupPlaceholderTag ( true );

Add container to form:

form.add(container);

Add ours someComponent

to this container:

container.add(someComponent);

And in the container update method AjaxCheckBox#onUpdate()

with ajax:

protected void onUpdate(AjaxRequestTarget target) {
    //if checkbox is checked, then our component is shown
    container.setVisible(checkBoxValue);
    target.add(container);
}

In html code it will look like

  <div wicket:id="cont">
      <input type="text" wicket:id="someComponent"/>
  </div>

You can add any number of components to such a container, and you can manage them with it.

WICKET: control over the visibility of components when the CheckBox changes

More articles: