PrimeFaces CSS look'n'feel missing and JS

2019-01-01 16:20发布

站内文章 / 前端开发
34 0 0

问题:

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>

Managed 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;  
    }  

}

回答1:

PrimeFaces will auto-include the necessary JS/CSS resources in <h: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:

One or more resources has the target of \'head\' but not \'head\' component has been defined within the view

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.

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?



标签： jsf primefaces
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~