{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 宁负流年不负卿 的问题《PrimeFaces CSS look'n'feel missing and JS》','https://www.manongdao.com/q-15672.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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;
}
}
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:This mistake should also have been logged in the server log as below:
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?