如何使用JSF显示/隐藏组件？

如何使用JSF显示/隐藏组件？我目前正在尝试如此做与JavaScript的帮助一样，但不成功。我不能使用任何第三方库。如何使用JSF显示/隐藏组件？

谢谢| Abhi

2010-09-12 Abhishek Dhote

您想在页面生成期间显示/隐藏它，还是想要在已生成的页面上执行一些操作？第一个可以通过JSF标记的“呈现”属性来实现，后者通过JavaScript实现。 – amorfis 2010-09-12 10:16:56

页面呈现时，该组件应该不可见，并且当用户单击图像时应显示该组件。如果你能告诉我这个JS的方法会很棒！ – 2010-09-12 10:19:17

如果您可以使用JSF 2.0，''标签将允许您轻松更新页面的一部分，而不是触发完整的页面刷新。 – 2010-09-12 11:58:23

通常，您需要通过clientId获得控件的句柄。本例中使用JSF2 Facelets的看法与请求范围的结合得到一个处理其他控制：

<?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>

你到底如何做到这一点，将取决于你的工作就JSF的版本。请参阅此博客文章以获取较旧的JSF版本：JSF: working with component identifiers。

来源

2010-09-12 13:05:04 McDowell

不完全是问题的答案 – 2012-08-22 18:07:36

检查下面的代码。这是用于下拉菜单。在这个如果我们选择其他人，然后文本框将显示，否则文本框将隐藏。

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;">

，或者你可以检查此链接 click here

来源

2010-09-12 10:15:40

这是HTML + JS，它也适用于我的情况，但是我遇到了JSF的问题。 – 2010-09-12 10:22:37

@abhi如果你想单击图像，然后显示组件，然后给图像一个ID和IMG标记上使用onClick事件 – 2010-09-12 10:24:01

谢谢瑞奇，但多数民众赞成我在做什么，这是不适合我。当我点击图像时没有任何反应！ – 2010-09-12 10:27:45

使用“绘制的”如果在H-命名空间不是所有的标签上大部分属性可用。

<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />

来源

2010-09-12 11:57:03

这是迄今为止最简单也是最好的方式。感谢你的回答。 – 2016-01-07 02:33:40

您应该使用<h:panelGroup ...>标签，属性为rendered。如果您将true设置为呈现，则<h:panelGroup ...>的内容将不会显示。您的XHTML文件应该是这样的：

<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; 
    } 
}

来源

2011-05-30 10:01:49

非常正确的想法，但是如果您想要动态显示/隐藏组件，那么呈现的属性应该在组件内部的panelGroup上使用，而不是在panelGroup本身上使用，与AJAX事件一样。如果您在panelGroup上使用渲染，并且其条件最初为false，则在您第一次尝试更新它时会收到错误，因为它不会存在于页面上。 – 2011-12-15 20:44:40

实际上，你可以做到这一点没有 JavaScript中，只使用JSF的rendered属性，由封闭元素至少在JSF2中，可以将其显示/隐藏在本身可以重新呈现的组件中，例如panelGroup。例如，以下JSF代码显示或隐藏两个下拉列表中的一个或两个，具体取决于第三个值的大小。 AJAX事件用于更新显示：

<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>

来源

2011-12-15 17:55:16

这应该是被接受的答案。 – 2013-03-23 13:04:36

应该指出，这使用ajax，并会创建额外的服务器请求。虽然这可能会更好，但有时我会选择基于JavaScript的解决方案 – 2015-11-06 11:43:02

需要注意的是，如果您还想提交表单，则只会提交rendered = true的输入字段（或SelectOneMenus）。 – Fl0R1D3R 2016-03-22 15:12:23

如何使用JSF显示/隐藏组件？

回答

相关问题