jsf - PrimeFaces 3.3.1 p :dialog doesn't shows up. 错误:widgetVar 未定义

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

我想要在页面顶部有一个包含导航的p:dialog。当我单击页面顶部的链接时，必须显示此对话框。

错误描述:

当我点击“我想要”链接时，页面上没有任何反应(p:对话框没有显示)，我得到 Firebug 控制台上出现此错误:
```
popupModalMenu is not defined
http://localhost:8080/{appname}/view/xhtml/principal.jsf
Line 1
```
p:dialog (id="modalMenu") 已加载到页面上。

结构如下:

主页(/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>

最佳答案

我刚刚从 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>

关于jsf - PrimeFaces 3.3.1 p :dialog doesn't shows up. 错误:widgetVar 未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11346645/

jsf - PrimeFaces 3.3.1 p :dialog doesn't shows up. 错误:widgetVar 未定义

上一篇：magento将子类别设置为根类别

下一篇：axapta - 如何自定义 Axapta 报告 "SysReportAuto"？