Solución:
Usar <f:ajax render="idOfPanelContainingInputFields"> en la casilla de verificación y dar al componente que contiene los campos de entrada un rendered atributo que depende del estado de la casilla de verificación. No hay necesidad de otro desorden de código JS.
<h:form>
<fieldset>
<legend>
<h:selectBooleanCheckbox binding="#{showUserInfo}">
<f:ajax render="idOfPanelContainingTextBox" />
</h:selectBooleanCheckbox>
<h:outputText value="User information" />
</legend>
<h:panelGroup id="idOfPanelContainingTextBox" layout="block">
<ui:fragment rendered="#{not empty showUserInfo.value and showUserInfo.value}">
<p>
<h:outputLabel for="firstName" value="First name:" />
<h:inputText id="firstName" value="#{bean.user.firstName}" />
</p>
</ui:fragment>
</h:panelGroup>
</fieldset>
</h:form>
El ejemplo anterior vincula la casilla de verificación a la vista, por supuesto, también puede vincularla a una boolean propiedad de frijol, luego puede eliminar la not empty comprobar desde el rendered atributo.
<h:selectBooleanCheckbox value="#{bean.showUserInfo}">
...
<ui:fragment rendered="#{bean.showUserInfo}">
Ver también:
- ¿Cómo averiguar el ID de cliente del componente para la actualización / renderización de ajax? No se puede encontrar el componente con la expresión “foo” referenciada desde “bar”
- ¿Por qué necesito anidar un componente con renderizado = “# {some}” en otro componente cuando quiero actualizarlo ajax?
Como sugiere amorfis, la idea de usar Ajax aquí no es la mejor solución, ya que hará una llamada a su servidor para una manipulación del lado del cliente.
La mejor solución es utilizar Javascript para ocultar su (s) componente (s). Por ejemplo, si todas sus etiquetas y textos de entrada están anidados en un <h:panelGrid> componente, puede hacer eso:
<script type="text/javascript">
function hideOrShow(show) {
// Get the panel using its ID
var obj = document.getElementById("myForm:myPanel");
if (show) {
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
</script>
<h:form id="myForm">
<h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/>
<h:panelGrid id="myPanel" columns="2">
...
</h:panelGrid>
</h:form>