¿Cómo puedo mostrar/ocultar componente con JSF? Actualmente estoy intentando hacer lo mismo con la ayuda de JavaScript pero no con éxito. No puedo usar ninguna biblioteca de terceros.¿Cómo puedo mostrar/ocultar componente con JSF?
Gracias | Abhi
En general, es necesario obtener un identificador para el control a través de su clientId. En este ejemplo se utiliza una vista JSF2 Facelets con una unión a obtener un identificador para el otro control de peticiones y alcance:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head><title>Show/Hide</title></h:head>
<h:body>
<h:form>
<h:button value="toggle"
onclick="toggle('#{requestScope.foo.clientId}'); return false;" />
<h:inputText binding="#{requestScope.foo}" id="x" style="display: block" />
</h:form>
<script type="text/javascript">
function toggle(id) {
var element = document.getElementById(id);
if(element.style.display == 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block'
}
}
</script>
</h:body>
</html>
Exactamente cómo se hace esto dependerá de la versión de JSF que está trabajando. Consulte esta publicación de blog para versiones anteriores de JSF: JSF: working with component identifiers.
no es exactamente una respuesta a la pregunta –
compruebe este código a continuación. esto es para el menú desplegable. En esto, si seleccionamos otros, el cuadro de texto mostrará lo contrario, el cuadro de texto se ocultará.
function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
The HTML code here :
<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">
o puede comprobar este acoplamiento click here
Esto es HTML + JS que también funciona en mi caso, pero estoy teniendo problemas con JSF. –
@abhi si desea hacer clic en la imagen y luego mostrar el componente, entonces proporcione una imagen y use el evento onClick en la etiqueta IMG –
Gracias Ricky, pero eso es lo que estoy haciendo y que no funciona para mí. ¡No pasa nada cuando hago clic en la imagen! –
utilizar el "prestado" de atributos disponibles en la mayoría, si no todas las etiquetas en el h-espacio de nombres.
<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />
Esta es hasta ahora la forma más simple y la mejor manera de hacerlo. Gracias por la respuesta. –
Debe usar la etiqueta <h:panelGroup ...> con el atributo rendered. Si configura true como procesado, no se mostrará el contenido de <h:panelGroup ...>. Su archivo XHTML debe tener algo como esto:
<h:panelGroup rendered="#{userBean.showPassword}">
<h:outputText id="password" value="#{userBean.password}"/>
</h:panelGroup>
UserBean.java:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class UserBean implements Serializable{
//field password and it's getter and setter
private boolean showPassword = false;
public boolean isShowPassword(){
return showPassword;
}
}
Más o menos la idea correcta, pero el atributo renderizado se debe utilizar en los componentes DENTRO del panelGroup, en lugar de hacerlo en el panelGroup, si desea poder mostrar/ocultar los componentes dinámicamente, como con un evento AJAX. Si usa renderizado en panelGroup y su condición es inicialmente falsa, recibirá un error la primera vez que intente actualizarlo porque no existirá en la página. –
en realidad se puede lograr esto sin JavaScript, usando atributo sólo de JSF rendered, encerrando a los elementos se mostrará/ocultará en un componente que puede ser reproducido por sí mismo, como un panelGroup, al menos en JSF2. Por ejemplo, el siguiente código JSF muestra u oculta una o ambas listas desplegables dependiendo del valor de un tercero. Un evento AJAX se usa para actualizar la pantalla:
<h:selectOneMenu value="#{workflowProcEditBean.performedBy}">
<f:selectItem itemValue="O" itemLabel="Originator" />
<f:selectItem itemValue="R" itemLabel="Role" />
<f:selectItem itemValue="E" itemLabel="Employee" />
<f:ajax event="change" execute="@this" render="perfbyselection" />
</h:selectOneMenu>
<h:panelGroup id="perfbyselection">
<h:selectOneMenu id="performedbyroleid" value="#{workflowProcEditBean.performedByRoleID}"
rendered="#{workflowProcEditBean.performedBy eq 'R'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.roles}" />
</h:selectOneMenu>
<h:selectOneMenu id="performedbyempid" value="#{workflowProcEditBean.performedByEmpID}"
rendered="#{workflowProcEditBean.performedBy eq 'E'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.employees}" />
</h:selectOneMenu>
</h:panelGroup>
Esta debería ser la respuesta aceptada. –
Debe tenerse en cuenta que usa ajax y creará solicitudes de servidor adicionales. Aunque esto puede ser preferible, a veces opto por una solución basada en JavaScript –
. Cabe señalar que si también desea enviar el formulario, solo se envían los campos de entrada (o aquí SelectOneMenus) con rendered = true. – Fl0R1D3R
¿Desea mostrar/ocultar durante la generación de la página o como reacción a alguna acción en la página ya generada? El primero se puede lograr mediante el atributo "renderizado" de las etiquetas JSF, el último mediante JavaScript. – amorfis
El componente debe ser invisible cuando se representa la página y se debe mostrar cuando el usuario haga clic en una imagen. Si puedes decirme el enfoque de JS ¡será genial! –
Si puede usar JSF 2.0, la etiqueta '' le permitirá actualizar fácilmente una parte de la página en lugar de activar una actualización completa de la página. –