Question

我想创建简单的选择菜单，在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>

P.S。 2我发现了一个问题。我只能改变div一次。当我多次尝试时，图层不会改变。

Answer 1

我使用以下代码对其进行了测试，结果如下：请创建并清空项目并测试以下代码。

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

确保输入正确的内容。检查您的firebug，看看是否有任何客户端错误。

Answer 2

您可以尝试通过以下方式呈现整个表单：

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

希望它有所帮助。

如何在JSF页面中创建选择菜单来更改div

2 个答案: