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
Hi my problem is somewhat similar to the following:
ajax-listener-not-working-with-inputfile
I am able to upload files using an AJAX call in my local environment and everything works as expected. However, when I deploy the war file onto Jelastic PaaS, the AJAX listener does not seem to be working.
I've tried updating to JSF2.2 on Jelastic by replacing the jar under
glassfish\modules and restarting the server, as suggested here:
JSF-working-properly-AJAX-file
But this does not seem to have fixed the problem.
I've even created a very simple test similar to the one used in the first link and I am still having no luck.
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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>JSF Test</title>
</h:head>
<h:body>
<h:form>
<h:commandButton id="btnTest" value="Command Button">
<f:ajax listener="#{submitFormBean.uploadTest()}"/> --> This works.
</h:commandButton>
</h:form>
<h:form>
<h:commandLink id="lnkTest" value="Command Link">
<f:ajax listener="#{submitFormBean.uploadTest()}"/> --> This works.
</h:commandLink>
</h:form>
<h:form enctype="multipart/form-data">
<h:inputFile id="fileTest">
<f:ajax listener="#{submitFormBean.uploadTest()}"/> --> This input file using Ajax call doesn't work
</h:inputFile>
</h:form>
</h:body>
</html>
bean
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ViewScoped
#ManagedBean(name = "submitFormBean")
public class SubmitFormBean{
public SubmitFormBean() {
}
public void uploadTest(){
System.out.println("Test");
}
}
Been stuck on this for a couple of days now so any help would be greatly appreciated. As mentioned, this works fine on my local development environment, but fails when deployed onto Jelastic's Glassfish4.
I have a problem with showing a Primeface p:gmap inside a ui:include component put in a layout page. I'm using the last version of primeface, mojarra and Tomcat 8.
this is my layout component where i try to render my google map:
<p:layoutUnit id="main_content" position="center" >
<ui:include src="#{pageManagingBean.page}.xhtml" />
</p:layoutUnit>
in the same page i have a button, when i click this:
<p:menuitem value="Display referencies Map" actionListener="#{pageManagingBean.setPage('gmapdata')}" icon="ui-icon-disk" update=":main_content" ajax="true"/>
the value of pageManagingBean.page change in the page with the p:gmap, and without reload the entire page, ui:include should load the gmap in the center layout, this is the gmapdata.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"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Google Map Displayed</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
</h:head>
<h:body>
<h1>Google Map</h1>
<f:view contentType="text/html">
<p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:100%" widgetVar="gmap" />
</f:view>
</h:body>
</html>
When I click the menu item, the center layout show nothing, but if I change the p:menuitem ajax="true" in ajax="false" all work fine and gmap is showed in the correct position, so why gmap don't render in ajax but work fine without?
EDIT
This problem is not only the rendering of the page gmap but also of the other pages that I try to load ajax in that part of the layout , for example, I have a page with a table of the work that should appear with the same mechanism , but show only if I impose ajax = false and the subsequent update of the entire page.
UPDATE
I did several tests and thus constituting the page with gmap ,
<h:head>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</h:head>
<h:body>
<f:view contentType="text/html">
<h1>Google Map</h1>
<p:gmap center="41.381542, 2.122893" zoom="15" type="HYBIRD"
style="width:600px;height:400px" />
</f:view>
</h:body>
</html>
and including ui:include into a <h:form id="main_content"> tag, who will update thanks to the p:menuItem...update="main_content"
content in the tag is added to the page with the ui : include , but is not rendered map , however if I enter manually , along with ui : include , the tag <gmap> in my mainpage: at first opening the map is rendered (map in the tag gmap than i have hadded manually), but when the layout is updated in ajax through the usual function by <p:menuItem> , both maps ( gmap added manually and that loaded by ui : include ) disappear.
obviously everything works setting ajax = false .
I can not explain the problem
I'm not sure but it could be related to the place of the google maps script
I am not in the same situation, I have a template using ui:inser ui:composition, ui:define, ui:include...
My template:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<ui:insert name="resources">
<ui:include src="/template/resources.xhtml"/>
</ui:insert>
<title>MyApp</title>
<ui:insert name="scripts"/>
<link rel="icon" type="image/png" href="resources/img/favicon.png"/>
</h:head>
<h:body>
<f:view contentType="text/html">
<ui:insert name="header">
<ui:include src="/template/header.xhtml"/>
</ui:insert>
<ui:insert name="menu">
<ui:include src="/template/menu.xhtml"/>
</ui:insert>
<ui:insert name="content"/>
<ui:insert name="footer">
<ui:include src="/template/footer.xhtml"/>
</ui:insert>
</f:view>
</h:body>
</html>
and when I build the page with g:map I do
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="/template/template.xhtml"
xmlns:p="http://primefaces.org/ui">
<ui:define name="scripts">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"/>
</ui:define>
<ui:define name="content">
<p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:100%" widgetVar="gmap"/>
</ui:define>
</ui:composition>
because the scripts has to be loaded in the head
And when you update main_content using ajax, what going on in the head?
I think you have to put the script in the head, form the beginig, so that the page is load with the script anyway.
EDIT
And you could have problem if you are using forward based navigation because primefaces don't support that
http://primefaces.org/faq.html
you have to concat view id with "?faces-redirect=true" in action attribute of commandLink or commandButton
UPDATE
Generally there is a Javascript function to initialize the map
This function (Generally called initialize()) is call on the load event of the page
https://developers.google.com/maps/documentation/javascript/events
when you do an ajax request you should call this function to initialize the map
I try to execute your code but I have a jquery error: "TypeError: b is undefined" jquery.js.xhtml:1:30
It's seems that it is a javascript problem, I don't know how to solve it
Update form tag: <h:form prependId="false" id="main_content">. In my case it is worked when i kept prependId="false".
So, I have a jar that contains several common .xhtml files that I use in my web project (JSF2.2 in a Wildfly 8.1 server) as custom components.
Also, in the same .jar I have a utility class ( ViewUtils ) that has a function that I call from the .xhtml files located in my web project.
The thing is that I actually want to access that EL function from the .xhtml files located in the same jar where the function is, and I can't. JBoss says that the EL expression is not recognized. However, I am able to call that function from the .xhtml files located in my web project (.war)
Do I explain myself?
Here is the code.
This is the code in my .jar
public final class ViewUtils {
(...)
public static String getEnumMessageKey(final Enum<?> e) {
String key = "";
try {
key = "enum_" + e.getClass().getSimpleName().toLowerCase() + '_' + e.name().toLowerCase();
} catch (Exception e) {
LOG.debug("Key not found or null.");
}
return key;
}
(...)
}
custom.taglib.xml
<namespace>http://mycompany.com/taglib</namespace>
<composite-library-name>conexiacomponent</composite-library-name>
<function>
<function-name>enum_key</function-name>
<function-class>com.mycompany.one.webcore.util.ViewUtils</function-class>
<function-signature>java.lang.String getEnumMessageKey(java.lang.Enum)</function-signature>
</function>
.xhtml component
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:cx="http://mycompany.com/taglib">
(...)
<li>#{i18n[cx:enum_key(cc.attrs.enumParam)]}: #{cc.attrs.afiliado.numeroDocumento}</li>
(...)
</composite:implementation>
</html>
And this is a .xhtml located in my .war
<?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://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:cnx="http://mycompany.com/taglib"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="valuePath"/>
<composite:attribute name="view"/>
</composite:interface>
<composite:implementation>
<h:selectOneMenu id="tipoDoc" value="#{cc.attrs.valuePath}" converter="com.mycompany.one.webcore.converter.GeneralConverter" styleClass="form-control input-sm" >
<f:selectItem itemLabel="Seleccione.." itemValue="#{null}" />
<f:selectItems value="#{comboView.documentTypes}" var="_ti" itemLabel="#{i18n[cnx:enum_key(_ti)]}" itemValue="#{_ti}" />
</h:selectOneMenu>
</composite:implementation>
</html>
And finally, this is the error that I get when I try to access a view that includes one of those jar components (that calls the function).
Caused by: javax.el.ELException: Function 'cx:enum_key' not found
Please ask me any questions if something is not clear enough.
Thanks in advance.
I solved it.
The problem didn't have anything to do with external jars or whatsoever.
In my code I was calling the function in my .xhtml like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:cx="http://mycompany.com/taglib">
(...)
<li>#{i18n[cx:enum_key(cc.attrs.enumParam)]}: #{cc.attrs.afiliado.numeroDocumento}</li>
(...)
</composite:implementation>
</html>
And the EL expression should have been inside a value attribute like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:cx="http://mycompany.com/taglib">
(...)
<li><h:outputText value="#{i18n[cx:enum_key(cc.attrs.enumParam)]} #{cc.attrs.afiliado.numeroDocumento}" /></li>
(...)
</composite:implementation>
</html>
So, thanks anyway!
I'm having trouble displaying the deploy-java button on ajax rerender
<h:form id="deployJavaForm" rendered="#{myBean.shouldRender}">
<h:outputScript library="js" name="http://java.com/js/deployJava.js" target="head" />
<script type="text/javascript">
deployJava.createWebStartLaunchButton('blah.jnlp', '1.7.0');
</script>
</h:form>
when
myBean.shouldRender == true
and the form is updated the only thing being displayed (on a white page) is the deployJava-button and the request is left hanging. if shouldRender is true on the initial request, page and button is displayed correctly.
Im using primefaces in case it can help.
What I want to do is to have the button to be displayed correctly regardless if its part of a ajax rerender or a complete initial request.
Update:
I did my homework and created a minimal example that still reproduces the problem. It seems I still get the same problems regardless if script declaration is in head or in body (I have copy of deployJava.js in resources/js)
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<!-- <script type="text/javascript" src="http://java.com/js/deployJava.js" />-->
</h:head>
<h:body>
<h:outputScript library="js" name="deployJava.js" target="head" />
<h:form id="djForm">
<script type="text/javascript">
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</script>
<p:commandButton value="update" update="djForm" />
</h:form>
</h:body>
</html>
edit: (specialgems)
below test give same problem as observed earlier.
<h:outputScript>
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</h:outputScript>
edit: added picture
after click of update button, only deployJava button is rendered and page is loading
edit (daniel): both on success and oncomplete give same behaviour :(
<h:form id="djForm">
<h:outputScript>
function abcefg() {
deployJava.createWebStartLaunchButton('test.jnlp', '1.7.0');
}
</h:outputScript>
<p:commandButton value="update" update="djForm" onsuccess="abcefg()" />
</h:form>
Alternatively to using js and css visibility described in my comment you can write own composite button component. Using Firebug you can investigate which markup is generated by the deployJava.createWebStartLaunchButton script and add it by yourself statically. So your component could be:
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite">
<head>
<title>deployJava Button component</title>
</head>
<body>
<composite:interface>
<composite:attribute name="version" required="true"
type="java.lang.String" />
<composite:attribute name="url" required="true"
type="java.lang.String" />
</composite:interface>
<composite:implementation>
<a onmouseover="window.status=''; return true;"
href="javascript:if (!deployJava.isWebStartInstalled("#{cc.attrs.version}")) {if (deployJava.installLatestJRE()) {if (deployJava.launch("#{cc.attrs.url}")) {}}} else {if (deployJava.launch("#{cc.attrs.url}")) {}}"><img
border="0" src="//java.com/js/webstart.png" /></a>
</composite:implementation>
</body>
</html>
so your page will be:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:comps="http://java.sun.com/jsf/composite/comps"
xmlns:p="http://primefaces.org/ui">
<h:head>
<!-- <script type="text/javascript" src="http://java.com/js/deployJava.js" />-->
</h:head>
<h:body>
<h:outputScript library="js" name="deployJava.js" target="head" />
<h:form id="djForm">
<comps:deployJavaButton version="1.7.0" url="test.jnlp" rendered="#{myBean.shouldRender}" />
<p:commandButton value="update" update="djForm" />
</h:form>
</h:body>
</html>
The main idea is to avoid executing button creation script twice and more.
May be using h:panelGroup instead of h:form will help. Something like that:
<h:form id="djForm">
<h:panelGroup rendered="#{myBean.shouldRender}">
<script type="text/javascript">
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</script>
</h:panelGroup>
<p:commandButton value="update" update="djForm" />
</h:form>
I'm using JSF with Facelets 1.1.14 and need to return a JSON response to a ajax request.
But I'm getting the html tag in response. How can I hide this, to sent only JSON data?
Main Page
<html xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="../templates/JSONTemplate.xhtml">
<ui:define name="content">
<h:outputText escape="false" value="#{myjson}" />
</ui:define>
</ui:composition>
</html>
Template
<html xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:insert name="content" />
</html>
Note:a templateless solution is better.
Just remove <html> tag.
<ui:composition template="../templates/JSONTemplate.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<ui:define name="content">
<h:outputText escape="false" value="#{myjson}" />
</ui:define>
</ui:composition>
and
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:insert name="content" />
</ui:composition>
As to a templateless solution, use JAX-RS instead of JSF. JSF is a web MVC framework, not a web service framework.
See also:
JSF + JSON: Output "plain" text in servlet?
SOLVED:
I just removed the xhtml file and navigation-case in faces-config.xml.
Then I intercept response and write directly my json string.
// code in MyBean.java
getResponse().getWriter().append(getMyJSON());
return null;
As BalusC said, the better option is use JAX-RS, but I need a faster solution to develop.