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
source to share
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.
source to share