如何創建選擇菜單以更改JSF頁面中的div

我想要創建簡單的選擇菜單，該菜單在JSF頁面中更改<div>圖層。我測試此代碼：如何創建選擇菜單以更改JSF頁面中的div

<div id="test" style="width:850px; height:800px; position:absolute; background-color:transparent; top:700px; left:10px"> 
        <h:form> 
        <h:panelGroup layout="block"> 
         <h:selectOneListbox size="0" id="selectedMenu" value="#{DashboardController.selectedMenu}"> 
          <f:selectItem itemLabel="first" itemValue="0" /> 
          <f:selectItem itemLabel="second" itemValue="1" /> 
          <f:selectItem itemLabel="third" itemValue="2" /> 

          <f:ajax event="change" execute="@this" render="loadMenu" /> 
         </h:selectOneListbox> 
        </h:panelGroup> 

        <h:panelGroup layout="block" id="loadMenu"> 
         <h:panelGroup rendered="#{DashboardController.selectedMenu=='0'}"> 
          MENU 0 
         </h:panelGroup> 

         <h:panelGroup rendered="#{DashboardController.selectedMenu=='1'}"> 
          MENU 1 
         </h:panelGroup> 

         <h:panelGroup rendered="#{DashboardController.selectedMenu=='2'}"> 
          MENU 2 
         </h:panelGroup> 
        </h:panelGroup> 
        </h:form>  
       </div>

private String selectedMenu; 

@PostConstruct 
public void init() { 
    if (selectedMenu==null || selectedMenu.trim().isEmpty()) { 
     this.selectedMenu="0"; 
    } 
} 

public String getSelectedMenu() { 
    return selectedMenu; 
} 

public void setSelectedMenu(String selectedMenu) { 
    this.selectedMenu = selectedMenu; 
}

但由於某些原因，它不工作。你能幫我糾正我的錯誤嗎？

P.S完整的頁面源

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"  
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:p="http://primefaces.org/ui"> 
    <h:head> 
     <ui:insert name="header">   
      <ui:include src="header.xhtml"/>   
     </ui:insert> 
     <script type="text/javascript"> 
      $.noConflict(); 
     </script> 
     <style type="text/css"> 
      .jqplot-title{ 
       color:#FFFFFF; 
      } 
      .jqplot-xaxis-label{ 
       color:#FFFFFF; 
      } 
      .jqplot-yaxis-label{ 
       color:#FFFFFF; 
      } 
      .jqplot-xaxis-tick{ 
       color:#FFFFFF; 
      } 
      jqplot-yaxis-tick{ 
       color:#FFFFFF; 
      } 
     </style> 
    </h:head> 
    <h:body> 
     <h1><img src="resources/css/images/icon.png" alt="DX-57" /> Account Center</h1> 
     <!-- layer for black background of the buttons --> 
     <div id="toolbar" style="margin: 0 auto; width:100%; height:30px; position:relative; background-color:black"> 
      <!-- Include page Navigation --> 
      <ui:insert name="Navigation">   
       <ui:include src="Navigation.xhtml"/>   
      </ui:insert> 
     </div> 
     <div id="logodiv" style="position:relative; top:35px; left:0px;"> 
      <h:graphicImage alt="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_dashboard.png" /> 
     </div> 
     <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px"> 

      <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px"> 

       <div id="datachart" style="margin: 0 auto; width:850px; height:400px; position:relative"> 
        <h:form prependId="false"> 
         <p:growl id="growl" showDetail="true" /> 

         <p:barChart id="basic" value="#{DashboardController.categoryModel}" 
            title="Accounts and Groups" min="0" max="#{DashboardController.chartMaxSize}" style="height:400px" 
            shadow="true" barPadding="90" seriesColors="4D94FF, 1975FF, 005CE6, 0047B2" 
            yaxisLabel="Size" > 
          <p:ajax event="itemSelect" listener="#{DashboardController.itemSelect}" update="growl" /> 
         </p:barChart> 
        </h:form> 
       </div> 

       <div id="test" style="width:850px; height:800px; position:absolute; background-color:transparent; top:700px; left:10px"> 
        <h:form> 
        <h:panelGroup layout="block"> 
         <h:selectOneListbox size="0" id="selectedMenu" value="#{DashboardController.selectedMenu}"> 
          <f:selectItem itemLabel="first" itemValue="0" /> 
          <f:selectItem itemLabel="second" itemValue="1" /> 
          <f:selectItem itemLabel="third" itemValue="2" /> 

          <f:ajax event="change" execute="@this" render="loadMenu" /> 
         </h:selectOneListbox> 
        </h:panelGroup> 

        <h:panelGroup layout="block" id="loadMenu"> 
         <h:panelGroup rendered="#{DashboardController.selectedMenu=='0'}"> 
          MENU 0 
         </h:panelGroup> 

         <h:panelGroup rendered="#{DashboardController.selectedMenu=='1'}"> 
          MENU 1 
         </h:panelGroup> 

         <h:panelGroup rendered="#{DashboardController.selectedMenu=='2'}"> 
          MENU 2 
         </h:panelGroup> 
        </h:panelGroup> 
        </h:form>  
       </div> 
      </div> 
     </div> 
    </h:body> 
</html>

附： 2我發現一個問題。我只能換一次div。當我嘗試更多次時，圖層不會更改。

來源

2012-08-01 user1285928

什麼是您的bean範圍？ – 2012-08-05 23:43:29

我使用ViewScope。 – user1285928 2012-08-06 08:29:06

您是否嘗試過使用「eq」而不是「==」？ – 2012-08-07 07:21:13

我用下面的代碼測試了它，它的工作原理如下：請創建並清空項目並測試以下代碼。

<h:head> 

</h:head> 
<h:body> 
    <div id="test" style="width:850px; height:800px; position:absolute; background-color:transparent; "> 

     <h:form> 
      <h:panelGroup layout="block"> 
       <h:selectOneListbox size="0" id="selectedMenu" value="#{dashboardController.selectedMenu}"> 
        <f:selectItem itemLabel="first" itemValue="0" /> 
        <f:selectItem itemLabel="second" itemValue="1" /> 
        <f:selectItem itemLabel="third" itemValue="2" /> 

        <f:ajax event="change" execute="@this" render="loadMenu" /> 
       </h:selectOneListbox> 
      </h:panelGroup> 

      <h:panelGroup layout="block" id="loadMenu"> 
       <h:panelGroup rendered="#{dashboardController.selectedMenu=='0'}"> 
        MENU 0 
       </h:panelGroup> 

       <h:panelGroup rendered="#{dashboardController.selectedMenu=='1'}"> 
        MENU 1 
       </h:panelGroup> 

       <h:panelGroup rendered="#{dashboardController.selectedMenu=='2'}"> 
        MENU 2 
       </h:panelGroup> 
      </h:panelGroup> 
     </h:form>  
    </div> 
</h:body>

@ManagedBean 
@ViewScoped 
public class DashboardController implements Serializable{ 

private String selectedMenu; 

@PostConstruct 
public void init() { 
    if (selectedMenu == null || selectedMenu.trim().isEmpty()) { 
     this.selectedMenu = "0"; 
    } 
} 

public String getSelectedMenu() { 
    return selectedMenu; 
} 

public void setSelectedMenu(String selectedMenu) { 
    this.selectedMenu = selectedMenu; 
} 
}

確保您輸入的一切權利。檢查你的螢火蟲，看看是否有任何客戶端錯誤。

來源

2012-08-11 06:50:02 Heidarzadeh

@ user1285928這個答案對你有幫助嗎？如果沒有，請告訴我幫助更多。 – Heidarzadeh 2012-08-11 09:30:16

你可以嘗試通過渲染整個表單：

<f:ajax event="change" execute="@this" render="@form" />

希望它能幫助。

來源

2012-08-10 22:26:08

如何創建選擇菜單以更改JSF頁面中的div

回答

相關問題