PrimeFaces CSSlook'n'feel缺失和JS“未捕获的参考错误:PrimeFaces未定义" [英] PrimeFaces CSS look'n'feel missing and JS "Uncaught Reference Error: PrimeFaces is not defined"
问题描述
我正在尝试使用 Primefaces 中的选择列表.当页面呈现时，Chrome 中的 javascript 引擎找不到 Primefaces 对象.我收到以下错误Uncaught ReferenceError: PrimeFaces is not defined".我是否缺少在我的 .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>
托管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 将在
PrimeFaces will auto-include the necessary JS/CSS resources in <h:head>.
但是，您没有那个标签.你有一个纯 HTML".相应地修复它:
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:
一个或多个资源具有'head'的目标，但没有在视图中定义'head'组件
另见如何包含使用 JSF 2.0 Facelets 的 XHTML 中的另一个 XHTML? 和 何时使用 <ui:include>、标记文件、复合组件和/或自定义组件? 用于创作 JSF/Facelets 页面的各种正确示例.
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.
立即抓住机会将冗长的 替换为
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 CSSlook'n'feel缺失和JS“未捕获的参考错误:PrimeFaces未定义"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
