Geek Answers Handbook

PrimeFaces CSS look'n'feel is missing and JS "Bond link error: PrimeFaces not defined"

I am trying to use Picklist from Primefaces. When the page is displayed, the javascript engine in Chrome cannot find the Primefaces object. I get the following error message: "Untrained ReferenceError: PrimeFaces not defined." Am I missing enough 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>

Driven 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; } }
+4
source share
1 answer

PrimeFaces will automatically include the required JS / CSS resources in <h:head> .

However, you do not have this tag. You have "plain HTML" <head> . Correct it accordingly:

 <html> <h:head> ... </h:head> <h:body> ... </h:body> </html>

This error should also be logged in the server log, as shown below:

One or more resources have a head purpose, but no head component has been defined in the view

See also How to include another XHTML in XHTML using JSF 2.0 Facelets? and When to use <ui: include & gt, tag files, composite components and / or custom components? for various correct examples of creating JSF / Facelets pages.

Unrelated to the specific issue: PrimeFaces as a jQuery-based JSF component library already comes with jQuery and jQuery UI bundled. You must remove manually included scripts from your page to avoid conflicts. See Also Adding jQuery results to PrimeFaces in Uncaught TypeError in all places .

Take immediately the opportunity to replace this detailed <link> with <h:outputStylesheet> . See Also How to reference a CSS / JS / image resource in a Facelets template?

+24
source

More articles:


All Articles