PrimeFaces CSS 看起来感觉缺失，JS "Uncaught Reference Error: PrimeFaces is not defined"

我正在尝试使用Primefaces的Picklist。当页面呈现时，Chrome 中的 JavaScript 引擎找不到 Primefaces 对象。我收到以下错误"未捕获的引用错误：未定义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>

管理豆

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>

此错误也应该记录在服务器日志中，如下所示：

一个或多个资源具有"head"的目标，但视图中未定义"head"组件

参见如何使用 JSF 2.0 Facelets 在 XHTML 中包含另一个 XHTML？和何时使用 <ui：include>、标记文件、复合组件和/或自定义组件？以获取创作 JSF/Facelets 页面的各种正确示例。

与具体问题无关：PrimeFaces作为一个基于jQuery的JSF组件库，已经捆绑了jQuery和jQuery UI。您应该从页面中删除手动包含的脚本以避免冲突。另请参阅将 jQuery 添加到 PrimeFaces 会导致所有位置出现未捕获的 TypeError。

立即借此机会用<h:outputStylesheet>替换冗长的<link>。参见如何在 Facelet 模板中引用 CSS/JS/图像资源？

相关内容

最新更新

热门标签：