如何使用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顯示/隱藏組件？

回答

相關問題