8

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

}
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
user1662917
  • 103
  • 1
  • 2
  • 6
  • I encountered this issue using the PrimeFaces 10 dialog framework to open a simple facelets page in a popup dialog. In my case, the page inside the dialog was very simple and contained only a single `p:graphicImage` component. I was getting a "_$ is not defined_" error that went away when I added a _hidden_ `p:commandButton`. The error was caused by PrimeFaces' CSS/nonce code that needed jQuery, but couldn't find it.. When I tried to manually include jQuery, the error changed to "_PrimeFaces is not defined_" so I added the hidden `p:commandButton` and that made all the errors go away. – jahroy Jun 30 '22 at 19:49

1 Answers1

29

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?

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555