PrimeFaces CSS look'n'feel丢失和JS“未捕获的参考错误：PrimeFaces未定义”
我正在尝试从Primefaces中使用Picklist。 当页面呈现时，Chrome中的JavaScript引擎找不到Primefaces对象。 我得到以下错误'未捕获的ReferenceError：PrimeFaces未定义'。 我是否错过在我的.xhtml文件中包含任何资源（js）？ 请指教。 谢谢。
XHTML
<?xml version="1.0"?> <!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:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <head> <link rel="stylesheet" type="text/css" href="../jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css" /> <link rel="stylesheet" type="text/css" href="css/form.css" media="all" /> <script src="../jquery-ui-1.8.23.custom/js/jquery-1.8.0.min.js"></script> <script src="../jquery-ui-1.8.23.custom/js/jquery-ui-1.8.23.custom.min.js"></script> </head> <h:body> <form id="form_486588" class="appnitro" method="post"> <div class="form_description"></div> <p:pickList id="pickList" value="#{editorsMB.editors}" var="editor" itemLabel="#{editor}" itemValue="#{editor}" /> <p:commandButton id="citySubmit" value="Submit" style="margin-top:5px" /> </form> </h:body> </html> 托pipe的bean
import java.util.ArrayList; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import org.primefaces.model.DualListModel; @ManagedBean(name = "editorsMB") @SessionScoped public class AdminEditorsBean { private DualListModel<String> editors; public AdminEditorsBean(){ List<String> adminsSource = new ArrayList<String>(); List<String> adminsTarget = new ArrayList<String>(); adminsSource.add("aaa"); adminsTarget.add("target1"); editors = new DualListModel<String>(adminsSource, adminsTarget); } public DualListModel<String> getEditors() { return editors; } public void setEditors(DualListModel<String> editors) { this.editors = editors; } }
PrimeFaces将在<h:head>自动包含必要的JS / CSS资源。
但是，您没有该标签。 你在那里有一个“纯HTML” <head> 。 相应地修复它：
<html> <h:head> ... </h:head> <h:body> ... </h:body> </html>
这个错误也应该logging在服务器日志中，如下所示：
一个或多个资源的目标是“头”，而不是“头”组件已经在视图中定义
另请参见如何使用JSF 2.0 Facelets在XHTML中包含另一个XHTML？ 以及何时使用<ui：include>，标记文件，复合组件和/或自定义组件？ 为创作JSF / Facelets页面的各种正确的例子。
与具体问题无关 ：作为基于jQuery的JSF组件库，PrimeFaces已经捆绑了jQuery和jQuery UI。 您应该从您的页面中移除手动包含的脚本以避免冲突。 另请参见向PrimeFaces添加jQuery将导致Uncaught TypeError覆盖整个地方 。
立即有机会用<h:outputStylesheet>来replace冗长的<link> <h:outputStylesheet> 。 另请参见如何引用Facelets模板中的CSS / JS /图像资源？
