PrimeFaces 3.3.1 p：对话框没有显示出来。错误：未定义widgetVar

时间：2012-07-05 14:39:15

标签： jsf jsf-2 primefaces migration

我正在按照MigrationGuide的步骤并使用3.3 version's Users Guide将PrimeFaces 2.2.1的开始项目迁移到3.3.1。

我希望页面顶部有一个 p：dialog ，其中包含导航。 当我点击页面顶部的链接时，必须显示此对话框。

错误说明：

  1. 当我点击“我想要”链接时，页面上没有任何反应（p：对话框没有显示），我得到了 Firebug控制台上出现此错误：

    popupModalMenu is not defined
http://localhost:8080/{appname}/view/xhtml/principal.jsf
Line 1

  2. 页面上加载了 p：对话框（id =“modalMenu”）。

    3. 结构如下：

    主页（/view/xhtml/principal.xhtml）： 

    <?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" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui"> 
    <ui:composition  template="base/master.xhtml"> 
        <ui:define name="conteudo"> 
                     Title of Main Page
        </ui:define> 
    </ui:composition> 
</html>

    大师（/view/xhtml/base/master.xhtml）： 

    <html><!-- DOCTYPE GOES HERE -->
    <ui:include src="head.xhtml" /> <!-- CONTAINS CSS, JAVASCRIPT STUFF -->
    <h:body>
            <f:view contentType="text/html" >   
            <div id="wrapper">          
                <!-- TOP BEGIN -->
                <div id="header">
                    <div class="topo" id="topo">
                        <div id="menuTopo" class="menu left">
                            <a id="linkMenu" class="left" href="javascript:;" onclick="popupModalMenu.show();">
                                I want
                                <div class="iconeDoMenu"></div>
                            </a>
                        </div>
                    </div>                  
                </div>
                <!-- END TOP -->
                <!-- CONTENT BEGIN -->
                <div id="content">
                    <div id="conteudo">
                    <!-- SYSTEM MENU BEGIN -->
                        <ui:include src="../menu.xhtml" />
                    <!-- END SYSTEM MENU -->
                    </div>
                </div>
                <!-- END CONTENT -->
            </div>
            </f:view>
    </h:body>
</html>

    负责人（/view/xhtml/base/head.xhtml）： 

    <html><!-- DOCTYPE GOES HERE -->
    <h:head>
        <title>Title</title>
        <meta http-equiv="keywords" content=" " />
        <meta http-equiv="description" content=" " />
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

        <link rel="stylesheet" type="text/css" href="../css/base/reset.css" /> 
        <link rel="stylesheet" type="text/css" href="../css/base/general.css" />
        <link rel="stylesheet" type="text/css" href="../css/base/skin.css" />
        <link rel="stylesheet" type="text/css" href="../css/primefaces/primefaces.css"/>

        <!--[if IE 7]>
            <link rel="stylesheet" type="text/css" href="../css/base/generalIE7.css" />
        <![endif]-->

        <!--[if IE 8]>
            <link rel="stylesheet" type="text/css" href="../css/base/generalIE8.css" />
        <![endif]-->

        <script type="text/javascript">
            jQuery.noConflict();
        </script>

        <script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/currency_mask.js"></script>
        <script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/date_mask.js"></script>
        <script type="text/javascript" src="../js/ourjs.js"></script>

        <!-- Internal screen's Css -->
        <link href="../css/generalUtilScreen.css" media="all" rel="stylesheet" type="text/css"/>

        <!-- menu's scripts and css -->
        <link href="../css/base/menu.css" media="all" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="../js/jquery.metadata.js"></script>
        <script type="text/javascript" src="../js/jquery.mb.flipText.js"></script>
        <script type="text/javascript" src="../js/mbExtruder.js"></script>
        <script type="text/javascript">
        $(function(){
            $("#extruderLeft").buildMbExtruder({
                position:"left",
                width:300,
                extruderOpacity:.8,
                hidePanelsOnClose:true,
                accordionPanels:true,
                onExtOpen:function(){},
                onExtContentLoad:function(){},
                onExtClose:function(){}
            });
        });
        </script><!-- menu's scripts and css end -->
        <!-- Scripts inside menu -->
        <h:outputStylesheet library="primefaces/jquery/ui" name="jquery-ui.css"/>
        <h:outputScript library="primefaces/jquery/ui" name="jquery-ui.js" target="head"/>

        <script type="text/javascript">
        $(function(){
            // Accordion
            $("#accordion").accordion({ header: "h3" });
        });
        </script><!-- end Scripts inside menu -->

            <script type="text/javascript" src="../js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
        <link rel="stylesheet" href="../css/base/verticaltabs.css" />
        <script type="text/javascript" src="../js/provider.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){fornecedor.verticalTabs();});
        </script>

            <!-- Internal screen's Css -->              
            <link href="../css/provider.css" rel="stylesheet" type="text/css"></link>
         <!--  END PROVIDER -->

    </h:head>
</html>

    菜单（/view/xhtml/menu.xhtml）： 

    <html><!-- DOCTYPE GOES HERE -->
    <p:dialog   id="modalMenu" widgetVar="popupModalMenu" 
            draggable="false" resizable="false" modal="true"
            width="940" height="580"
            showEffect="fade" hideEffect ="fade"
            position="null" closable="false" dynamic="false" 
            minimizable="false" maximizable="false">
        <h:form id="formMenu">
            <div id="nav">
                <div id="menu">
                    <p:commandButton id="btnCloseModalMenu" styleClass="btcloseMenu" 
                        title="Click here to close" onclick="popupModalMenu.hide();">
                    </p:commandButton>
                    <!-- Menu's content goes this way: -->
                    <div id="divN"> 
                        <!-- Group of content -->
                                <h3><h:outputLabel>Group N</h:outputLabel></h3>
                                <div class="linkN">
                                    <!-- Links to pages -->
                            <ul>
                                <li><a id="menuN" href="urlN">Title N</a></li>
                                    </ul>
                                </div>
                            </div>  
                </div>
            </div>
        </h:form>
    </p:dialog>
</html>

2 个答案:

答案 0 :(得分：2)

我刚从Head中删除了一些代码。似乎与JQuery的版本存在冲突。感谢同事。

所以代码是这样的：

负责人（/view/xhtml/base/head.xhtml）： 

<html><!-- DOCTYPE GOES HERE -->
    <h:head>
        <title>Title</title>
        <meta http-equiv="keywords" content=" " />
        <meta http-equiv="description" content=" " />
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

        <link rel="stylesheet" type="text/css" href="../css/base/reset.css" /> 
        <link rel="stylesheet" type="text/css" href="../css/base/general.css" />
        <link rel="stylesheet" type="text/css" href="../css/base/skin.css" />
        <link rel="stylesheet" type="text/css" href="../css/primefaces/primefaces.css"/>

        <!--[if IE 7]>
            <link rel="stylesheet" type="text/css" href="../css/base/generalIE7.css" />
        <![endif]-->

        <!--[if IE 8]>
            <link rel="stylesheet" type="text/css" href="../css/base/generalIE8.css" />
        <![endif]-->

        <!-- REMOVED
        <script type="text/javascript">
            jQuery.noConflict();
        </script>
        -->

        <script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/currency_mask.js"></script>
        <script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/date_mask.js"></script>
        <script type="text/javascript" src="../js/ourjs.js"></script>

        <!-- Internal screen's Css -->
        <link href="../css/generalUtilScreen.css" media="all" rel="stylesheet" type="text/css"/>

        <!-- menu's scripts and css -->
        <link href="../css/base/menu.css" media="all" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="../js/jquery.metadata.js"></script>
        <script type="text/javascript" src="../js/jquery.mb.flipText.js"></script>
        <script type="text/javascript" src="../js/mbExtruder.js"></script>
        <script type="text/javascript">
        $(function(){
            $("#extruderLeft").buildMbExtruder({
                position:"left",
                width:300,
                extruderOpacity:.8,
                hidePanelsOnClose:true,
                accordionPanels:true,
                onExtOpen:function(){},
                onExtContentLoad:function(){},
                onExtClose:function(){}
            });
        });
        </script><!-- menu's scripts and css end -->
        <!-- Scripts inside menu -->
        <h:outputStylesheet library="primefaces/jquery/ui" name="jquery-ui.css"/>
        <h:outputScript library="primefaces/jquery/ui" name="jquery-ui.js" target="head"/>

        <script type="text/javascript">
        $(function(){
            // Accordion
            $("#accordion").accordion({ header: "h3" });
        });
        </script><!-- end Scripts inside menu -->

            <script type="text/javascript" src="../js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
        <link rel="stylesheet" href="../css/base/verticaltabs.css" />
        <script type="text/javascript" src="../js/provider.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){fornecedor.verticalTabs();});
        </script>

            <!-- Internal screen's Css -->              
            <link href="../css/provider.css" rel="stylesheet" type="text/css"></link>
         <!--  END PROVIDER -->

    </h:head>
</html>

答案 1 :(得分：0)

  1. 将<h:head/>放在head.xhtml
    2. 中
  2. 您在master.xhtml文件中</div>后缺少<!-- END SYSTEM MENU -->标记
相关问题
最新问题