Home/ Questions/Q 8377669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:43:50+00:00

I want to create simple select menu which changes <div> layers in JSF page.

  • 0

I want to create simple select menu which changes <div> layers in JSF page. I tested this code:

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

But for some reason it’s not working. Can you help me to correct my mistake.

P.S The complete page source

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

P.S. 2 I found a problem. I can change the divs only once. When I try it more times the layers are not changed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tested that with the following code and it worked:
    Please create and empty project and test the following code.

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

    Make sure you type everything right.
    Check your firebug to see if there are any client side errors.

    • 0