Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

PrimeFaces CSS look'n'feel missing and JS "Uncaught Reference Error: PrimeFaces is not defined"

Tags:

jsf

primefaces

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

}
like image 467
user1662917 Avatar asked Jan 27 '13 23:01

user1662917


1 Answers

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?

like image 63
BalusC Avatar answered Nov 15 '22 08:11

BalusC