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:
<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?
Related
I am trying to integrate the ICEFaces ACE component library in my project. I've the following view:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<h:outputStylesheet library="org.icefaces.component.skins"
name="rime.css" />
<f:loadBundle basename="resources.application" var="msg" />
<title>
<h:outputText value="#{msg.templateTitle}" />
</title>
</head>
<body>
<div id="content">
<h:form>
<ace:dataTable var="user" value="#{userBean.users}"
paginator="true" rows="50" selectionMode="multiple">
<ace:column headerText="users">
<ace:row>#{user}</ace:row>
</ace:column>
</ace:dataTable>
</h:form>
</div>
</body>
</html>
Unfortunately apparently there is no JavaScript / CSS loaded, so the components are not displayed properly. Moreover, the server logs this:
ICEfaces configured for view /index.xhtml but h:head and h:body components are required
Is this related?
You need to use JSF <h:head> and <h:body> components instead of plain HTML <head> and <body>. This way JSF and any JSF component library will be able to programmatically auto-include CSS/JS resources in there.
E.g.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core">
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<f:loadBundle basename="resources.application" var="msg" />
<h:head>
<title>#{msg.templateTitle}</title>
</h:head>
<h:body>
...
</h:body>
</html>
Note that this way you also don't need that <h:outputStylesheet> anymore.
See also:
One or more resources has the target of 'head' but not 'head' component has been defined within the view
Unrelated to the concrete problem, you'd better declare resources.application as <resource-bundle> in faces-config.xml, so that you don't need to repeat it over all views. Also note that you don't necessarily need <h:outputText> over all place. The <head> and all of above also indicates that you're learning JSF based on a JSF 1.x targeted tutorial instead of a 2.x targeted one. Make sure that you're using the right resources to learn.
I read somewhere that the Facelet Tag Libraries URI's changed from http://java.sun.com/jsf/* to http://xmlns.jcp.org/jsf/*, so that means the new namespaces applies only for the new specification(JSF 2.2) or they can or should be used in older versions like 2.0, 2.1 or 1.x?
for example:
Library Old URI New URI
Composite Components http://java.sun.com/jsf/composite http://xmlns.jcp.org/jsf/composite
Faces Core http://java.sun.com/jsf/core http://xmlns.jcp.org/jsf/core
HTML_BASIC http://java.sun.com/jsf/html http://xmlns.jcp.org/jsf/html
JSTL Core http://java.sun.com/jsp/jstl/core http://xmlns.jcp.org/jsp/jstl/core
Facelets Templating http://java.sun.com/jsf/facelets http://xmlns.jcp.org/jsf/facelets
EDIT
To make the question more understandable nothing like a snippet of code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" type="text/css" title="Style" href="theme/stylesheet.css" />
</h:head>
<h:body>
<h:form id="form1" styleClass="form">
<h:inputText id="text1" styleClass="inputText"></h:inputText>
</h:form>
</h:body>
</html>
The previous code would be valid for JSF 2.0? notice the taglibs:
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
Thanks.
From what I've seen here : http://www.oracle.com/webfolder/technetwork/jsc/xml/ns/index.html, the canonical names for the large majority of taglibs stays http://java.sun.com/
However, as stated, you can use the new URIs since they created an alias.
I'm trying to show a dialog from a bean as described in this PrimeFaces ShowCase. The thing is everything works as expected and dialog shows up, BUT if I close the dialog and then press the button again, the dialog won't show up unless the page is refreshed.
This is not the behavior shown in the example where every time the button is pressed the dialog shows up.
The only difference I have in my code is I have used CDI alternatives instead of managed beans package, because javax.faces.bean package will be deprecated. I mean:
javax.inject.Named instead of javax.faces.bean.ManagedBean
javax.faces.view.ViewScoped instead of javax.faces.bean.ViewScoped
In any case I've also tried with managed bean package but still the same wrong behavior.
This is what I have so far:
index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<p:commandButton value="Open" actionListener="#{viewDialogMB.viewDialog()}"/>
</h:form>
</h:body>
</html>
ViewDialogMB.java
import java.util.HashMap;
import java.util.Map;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import org.primefaces.context.RequestContext;
#Named(value = "viewDialogMB")
#ViewScoped
public class ViewDialogMB {
public void viewDialog() {
Map<String,Object> options = new HashMap<>();
options.put("modal", true);
options.put("resizable", true);
RequestContext.getCurrentInstance().openDialog("dialog", options, null);
}
}
dialog.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Dialog Title</title>
</h:head>
<h:body>
<p:outputLabel value="Hello from Dialog!" />
</h:body>
</html>
faces-config.xml (as per Dialog Framework documentation)
<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="2.2"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">
<application>
<action-listener>
org.primefaces.application.DialogActionListener
</action-listener>
<navigation-handler>
org.primefaces.application.DialogNavigationHandler
</navigation-handler>
<view-handler>
org.primefaces.application.DialogViewHandler
</view-handler>
</application>
</faces-config>
By the way my platform (if makes any difference) is:
Glassfish 4
JSF 2.2
JDK 1.7 - 64 bits
Java EE 7
PrimeFaces 5.0 (community version)
I have tried with Mozilla Firefox, Google Chrome and MS IE11.
This bug was reported here Dialog Framework regression bug in PF 4.0.10 and higher and Issue 6915: PF 5.0 error when closing DF window opened from DataTable
As a workaround solution, use taconic's solution which is to add a panel inside the body.
Your dialog.xhtml would look like this :
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Dialog Title</title>
</h:head>
<h:body>
<p:panel>
<p:outputLabel value="Hello from Dialog!" />
</p:panel>
</h:body>
</html>
Try using < p:dialog> they are really handy. Or you can do as "dic19" said and disable ajax as follows
<p:commandButton ajax="false" value="Open" actionListener="#{viewDialogMB.viewDialog()}"/>
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:
<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?
I am trying richface 4. It seems tags class are not setting on JAVA build path. I am getting this error for all rich component: "ERROR: tag handler class for * (org.richfaces.taglib.*) was not found on the Java Build Path"
For a4j component also, for all component i am getting same error "The tag handler class for "a4j:" (org.ajax4jsf.taglib.html.jsp.) was not found on the Java Build Path"
For richface4, i performed following actoin:
1) Added following jars:
annotations-4.0.0.Final.jar
cssparser-0.9.5.jar
guava-r08-gwt.jar
guava-r08.jar
jsf-api.jar
jsf-impl.jar
richfaces-components-api-4.1.0.Final.jar
richfaces-components-ui-4.1.0.Final.jar
richfaces-core-api-4.1.0.Final.jar
richfaces-core-impl-4.1.0.Final.jar
sac-1.3.jar
commons-beanutils-1.8.3.jar
commons-collections-3.2.1.jar
commons-digester-2.1-sources.jar
commons-digester-2.1.jar
commons-discovery-0.4.jar
jhighlight-1.0.jar
jsf-facelets-1.1.14.jar
web.xml is default generated and NO new element is added. As it is not required to change in RF4 (which is required in RF3.3).
JSP file is
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" version="2.0">
<jsp:directive.page language="java"
contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" />
<jsp:text>
<![CDATA[ <?xml version="1.0" encoding="ISO-8859-1" ?> ]]>
</jsp:text>
<jsp:text>
<![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
</jsp:text>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TESTING</title>
</head>
<body>
<f:view>
<h:form>
<a4j:commandLink
value="Opss! I forgot password"
reRender="forgetPasswordPanel"
oncomplete="#{rich:component('forgetPasswordPanel')}.show()">
</a4j:commandLink>
</h:form>
<rich:modalPanel id="forgetPasswordPanel" autosized="true" width="380">
<f:facet name="header">
<h:outputText value="Reset Password"/>
</f:facet>
</rich:modalPanel>
</f:view>
</body>
</html>
</jsp:root>
i further investigated this issue and found that taglib(tld file) doesn't contain tag-class for many rich and a4j component and richFace4.1 jar does not have corrosponding java class for them (which is in richFaces 3.3 jars).
Am i missing some jars ? What else should i do to work with richface4 ?
You seem to be trying to upgrade a RichFaces 3.3 web application to RichFaces 4.1. You need to do many more changes than only replacing the JAR files. You can find the exact migration steps in their own documentation: RichFaces 3.3.x to 4.x migration guide.
For example, JSP is been deprecated and replaced by Facelets, you'd need to rewrite your JSPs to be XHTMLs. The <rich:modalPanel> is been replaced by <rich:popupPanel>, you need to find and replace all those tags accordingly. The reRender attribute is been replaced by update attribute. Etcetera. Also that jsf-facelets-1.1.14.jar which is of Facelets 1.x should be removed from the /WEB-INF/lib. JSF 2.x libraries already ships with the right Facelets 2.x implementation bundled.
See also:
Migrating from JSF 1.2 to JSF 2.0