2
我正在將一個開始項目從PrimeFaces 2.2.1遷移到3.3.1，步驟如下：MigrationGuide和使用3.3 version's Users Guide。PrimeFaces 3.3.1 p：對話框不顯示。錯誤：widgetVar未定義
我想要一個p：dialog在頁面頂部，包含導航。 當我點擊頁面頂部的鏈接時，必須顯示此對話框。
錯誤描述：
當我點擊「我要」的鏈接，沒有任何反應頁面上（在p：對話框不會顯示出來），我也得到 這個錯誤在Firebug的控制檯：
popupModalMenu is not defined http://localhost:8080/{appname}/view/xhtml/principal.jsf Line 1的號碼：對話框（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>
萬事達（/視圖/ XHTML /鹼/主。 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.xhtml'的代碼。也許你沒有使用適當的'h：head'標籤，這會阻止某些資源正確加載。 – 2012-07-05 17:22:42
你試過appendToBody = true嗎？ – atamanroman 2012-07-06 16:17:26
@maple_shaft head.xhtml包括 – 2012-07-06 16:38:49