PrimeFaces CSS外观缺失，并且JS“未捕获的参考错误:未定义PrimeFaces". [英] PrimeFaces CSS look'n'feel missing and JS "Uncaught Reference Error: PrimeFaces is not defined"
问题描述
我正在尝试使用Primefaces中的Picklist.呈现页面后，Chrome中的JavaScript引擎无法找到Primefaces对象.我收到以下错误未捕获的ReferenceError:未定义PrimeFaces".我是否想在.xhtml文件中包含任何资源(js)?请指教.谢谢.
I am trying to use Picklist from Primefaces. When the page is rendered, the javascript engine in Chrome cannot find Primefaces object. I get the following error 'Uncaught ReferenceError: PrimeFaces is not defined'. Am I missing to include any resource (js) in my .xhtml file? Please advise. Thanks.
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>
托管豆
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资源.
PrimeFaces will auto-include the necessary JS/CSS resources in <h:head>.
但是，您没有该标签.您有一个纯HTML" <head>.相应地修复它:
However, you don't have that tag. You've there a "plain HTML" <head>. Fix it accordingly:
<html>
<h:head>
...
</h:head>
<h:body>
...
</h:body>
</html>
此错误也应该已经记录在服务器日志中，如下所示:
This mistake should also have been logged in the server log as below:
另请参见如何包含和
See also How to include another XHTML in XHTML using JSF 2.0 Facelets? and When to use <ui:include>, tag files, composite components and/or custom components? for various correct examples of authoring JSF/Facelets pages.
无关:与具体问题无关:PrimeFaces作为基于jQuery的JSF组件库，已经附带了jQuery和jQuery UI.您应该从页面中删除手动包含的脚本，以避免发生冲突.另请参见将jQuery添加到PrimeFaces会导致Uncaught TypeError在所有地方.
Unrelated to the concrete problem: PrimeFaces as being a jQuery based JSF component library already ships with jQuery and jQuery UI bundled. You should remove the manually included scripts from your page to avoid conflicts. See also Adding jQuery to PrimeFaces results in Uncaught TypeError over all place.
立即抓住机会，用<h:outputStylesheet>代替冗长的<link>.另请参见如何在Facelets模板?
Take immediately the opportunity to replace that verbose <link> by a <h:outputStylesheet>. See also How to reference CSS / JS / image resource in Facelets template?
这篇关于PrimeFaces CSS外观缺失，并且JS“未捕获的参考错误:未定义PrimeFaces".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
