I've tried to follow different posts on how to handle the ViewExpiredException in Mojarra 2.1.0 (with RichFaces 4) on GlassFish 3.1. But what I define in web.xml doesn't seams to have any effect. I use form base security and the user has to logon to access the content. I just want Glassfish (catalina) to redirect the user to a simple JSF page when the session times-out, with a link back to the login page.
I always get the the following error message;
javax.faces.application.ViewExpiredException: viewId:/app_user/activity/List.xhtml - View /app_user/activity/List.xhtml could not be restored.
at com.sun.faces.lifecycle.RestoreViewPhase.execute(RestoreViewPhase.java:202)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
at com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:113)
Who can I redirect the user when the user session has timed-out and trap the exception in the server log ?
Greetings, Chris.
layout.xhtml
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Had no effect
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
-->
<h:outputStylesheet name="css/default.css"/>
<h:outputStylesheet name="css/cssLayout.css"/>
<title>
<h:outputText value="Partner Tapestry - " /> <ui:insert name="title">Browser Title</ui:insert>
</title>
</h:head>
<h:body>
<div id="top" >
<ui:insert name="top">Top Default</ui:insert>
</div>
<div id="messages">
<rich:messages id="messagePanel"/>
</div>
<div id="content">
<ui:insert name="content">Content Default</ui:insert>
</div>
</h:body>
</html>
web.xml
...
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
2
</session-timeout>
</session-config>
<error-page>
<exception-type>javax.faces.application.ViewExpiredException</exception-type>
<location>/faces/resources/sessionExpired.xhtml</location>
</error-page>
...
login.xhtml
<ui:composition template="/resources/masterLayout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j">
<ui:define name="title">
<h:outputText value="Login"></h:outputText>
</ui:define>
<ui:define name="top">
<h:outputText value="Welcome" />
</ui:define>
<ui:define name="content">
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="username" value="Username" />
<h:inputText id="username" value="#{userController.userAuthentication}" />
<br />
<h:outputLabel for="password" value="Password" />
<h:inputSecret id="password" value="#{userController.passwordAuthentication}" />
<br />
<h:outputText value=" " />
<a4j:commandButton action="#{userController.login()}" value="Login"/>
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
finally sessionExpire.xhtml
<ui:composition template="/resources/masterLayout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j">
<ui:define name="title">
<h:outputText value="Session Exired"></h:outputText>
</ui:define>
<ui:define name="top">
<h:outputText value="Session expired, please login again" />
</ui:define>
<ui:define name="content">
<h:form>
<a4j:commandLink action="/resources/login?faces-redirect=true" value="Login" />
</h:form>
</ui:define>
</ui:composition>
Your approach should work perfectly fine for synchronous POST requests. However, you're using asynchronous (ajax) POST requests. Exceptions on ajax requests needs to be handled by either the jsf.ajax.addOnError init function in JavaScript or a custom ExceptionHandler.
See also
javax.faces.application.ViewExpiredException and error page not working
JSF: Cannot catch ViewExpiredException
Solved the problem by following this link on implementing a ExceptionHandlerFactory. A nice solution where you can have an exception navigation rule, but maybe a bit long. Thanks for the help #BalusC.
Related
I followed this solution and works perfectlly when a ViewExpiredException happen, but when i inspect (firefox utility) the view error redered, i see that its replacing it, but just inside the body tag of the normal view, i mean, the view which was the cause of the Exception. The view error had a css class declared in his own body tag, but i don't know, why doesn't replace the whole view error, instead just take all the content (after his body tag) of the view error and inserted inside the body tag of the normal view?
To get this behavior, i have a login view (normal view that i refer above) and just have to wait until session expire, then i try to login (submit the form of the view) and this trigger a ExceptionHandler to render de view error.
Here are some snippet:
login.xhtml
<!DOCTYPE html>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title>PrimeFaces</title>
</h:head>
<h:body styleClass="login-body">
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12 logo-container">
<p:graphicImage name="images/logo-colored.png" library="theme-layout" />
<h1>Login to Your Account</h1>
<h2>WELCOME</h2>
</div>
<div class="ui-g-12">
<p:inputText placeholder="User" />
</div>
<div class="ui-g-12">
<p:password placeholder="Password" feedback="false"/>
</div>
<div class="ui-g-12 chkbox-container">
<p:selectBooleanCheckbox id="remember-me" />
<p:outputLabel for="remember-me" value="Remember Me"/>
</div>
<div class="ui-g-12 button-container">
<p:commandButton type="submit" value="Log in" icon="fa fa-user" styleClass="orange-btn" action="#{menu.login}" update="frmLoginPromo">
</div>
</div>
</div>
<h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="theme-layout" />
</h:body>
</html>
error.xhtml
<!DOCTYPE html>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title>PrimeFaces - Error </title>
</h:head>
<h:body styleClass="exception-body">
<div class="exception-panel">
<p:graphicImage name="images/icon-error.png" library="theme-layout" />
<h1>Error Occured</h1>
<p>An error occured, please try again later.</p>
</div>
<h:outputStylesheet name="css/layout-blue.css" library="theme-layout" />
</h:body>
</html>
CustomExceptionHandler.java
#Override
public void handle() throws FacesException{
final Iterator<ExceptionQueuedEvent> lclExceptionQueue = getUnhandledExceptionQueuedEvents().iterator();
final FacesContext lclFacesContext = FacesContext.getCurrentInstance();
final Map<String, Object> requestMap = lclFacesContext.getExternalContext().getSessionMap();
while (lclExceptionQueue.hasNext()){
ExceptionQueuedEvent event = lclExceptionQueue.next();
ExceptionQueuedEventContext context = (ExceptionQueuedEventContext) event.getSource();
Throwable lclThrowable = context.getException();
try{
if (lclThrowable instanceof ViewExpiredException){
lclFacesContext.setViewRoot(lclFacesContext.getApplication().getViewHandler().createView(lclFacesContext, "/error.xhtml"));
lclFacesContext.getPartialViewContext().setRenderAll(true);
lclFacesContext.renderResponse();
}
}finally{
lclExceptionQueue.remove();
}
}
getWrapped().handle();
}
Here is how looks like, after error view is rendered
Inspecte view error
Please, tell me what am doing wrong?
Since you are already using PrimeFaces, I'd opt for not developing your own exceptionhandlers. PrimeFaces already has one that can handle both ajax and non-ajax requests.
For the people not using PrimeFaces, I'd suggest to use the OmniFaces exceptionhandling
For PrimeFaces 6.2 the documentation contains the information to configure this in chapter 11.3 (it is the same chapter btw for PF 6.1)
In summary (ALL quotes are from the PF documentation)
Configure an el resolver and the exceptionhandler
<application>
<el-resolver>
org.primefaces.application.exceptionhandler.PrimeExceptionHandlerELResolver
</el-resolver>
</application>
<factory>
<exception-handler-factory>
org.primefaces.application.exceptionhandler.PrimeExceptionHandlerFactory
</exception-handler-factory>
</factory>
Configure errorpages if you want to in web.xml
<error-page>
<exception-type>java.lang.Throwable</exception-type>
<location>/ui/error/error.jsf</location>
</error-page>
<error-page>
<exception-type>javax.faces.application.ViewExpiredException</exception-type>
<location>/ui/error/viewExpired.jsf</location>
</error-page>
You can then use information about the exceptions in EL in the error pages
<h:outputText value="Message:#{pfExceptionHandler.message}" />
<h:outputText value="#{pfExceptionHandler.formattedStackTrace}" escape="false" />
There is more info, for which I'd suggest to consult the documentation.
And for ajax exceptions you can do
<p:ajaxExceptionHandler type="javax.faces.application.ViewExpiredException"
update="exceptionDialog" onexception="PF('exceptionDialog').show();" />
<p:dialog id="exceptionDialog" header="Exception: #{pfExceptionHandler.type}
occured!" widgetVar="exceptionDialog" height="500px">
Message: #{pfExceptionHandler.message} <br/>
StackTrace: <h:outputText value="#{pfExceptionHandler.formattedStackTrace}" escape="false" />
<p:button onclick="document.location.href = document.location.href;"
value="Reload!"/>
</p:dialog>
The configuration for OmniFaces is fairly similar.
See also:
Session timeout and ViewExpiredException handling on JSF/PrimeFaces ajax request
I'm using Primefaces and trying to use bean validation but when validation fails instead of getting an appropriate message I just get a blank pages.
Heres the JSF code
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/xhtml/templates/main.xhtml">
<ui:param name="header" value="small-header" />
<ui:define name="content">
<div style="margin-top: 60px;"></div>
<h1>Member Sign In</h1>
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<h:panelGrid columns="3">
<h:outputLabel value="Username : "/>
<p:inputText id="username" value="#{signInView.username}"/>
<p:message for="username" style="color:red" />
<h:outputLabel value="Password :"/>
<p:password id="password" value="#{signInView.password}"/>
<p:message for="password" style="color:red" />
</h:panelGrid>
<p:commandButton style="margin-top: 20px;"
value="Sign In"
action="#{signInView.signIn}"
validateClient="false"
ajax="false"/>
</h:form>
<h:outputText>By signing in you agree to abide by our terms and conditions.</h:outputText>
<div style="margin-top: 50px;"></div>
<h:outputText>Not currently a member ?
<p:link outcome="/content/join/join" value="sign up for free"></p:link>
</h:outputText>
<div style="margin-top: 150px;"></div>
</ui:define>
</ui:composition>
And here is the main template file
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<h:outputStylesheet library="css" name="style.css" />
<h:outputScript library="js" name="menu.js" />
<link href='http://fonts.googleapis.com/css?family=Roboto:300,300italic' rel='stylesheet' type='text/css'/>
<title>
<ui:insert name="title">TODO: Add title here</ui:insert>
</title>
</f:facet>
</h:head>
<h:body>
<ui:include src="/WEB-INF/xhtml/includes/main/title_banner.xhtml">
<ui:param name="header" value="#{header}" />
</ui:include>
<ui:include src="/WEB-INF/xhtml/includes/menu/main_menu.xhtml"/>
<div class='white-bg'>
<div id="content">
<ui:insert name="content">TODO: Add content here</ui:insert>
</div>
</div>
<ui:include src="/WEB-INF/xhtml/includes/main/footer.xhtml" />
</h:body>
And on the ManagedBean 'username' is annotated with '#Size(min=2,max=5)' just for testing. If I enter a username of length smaller than 2 or larger than 5 after hitting the Sign In button I get a blank page.
Any ideas why this is happening?
Thanks.
Since you just post partial xhtml code, I cannot suggest you why problem occurs.
However, I give an example to demonstrate how to use bean validation
login.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"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html" encoding="UTF-8">
<!-- ################################################################# -->
<!-- ## Header -->
<h:head>
<f:facet name="first">
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
</f:facet>
</h:head>
<h:body>
<h:form>
<p:messages id="messages"
showDetail="true"
autoUpdate="true"
closable="true" />
<h:panelGrid columns="3">
<h:outputLabel value="Username : "/>
<p:inputText id="username" value="#{signInView.username}"/>
<p:message for="username" style="color:red" />
<h:outputLabel value="Password :"/>
<p:password id="password" value="#{signInView.password}"/>
<p:message for="password" style="color:red" />
</h:panelGrid>
<p:commandButton style="margin-top: 20px;"
value="Sign In"
action="#{signInView.signIn}"
validateClient="false"
ajax="false"/>
</h:form>
</h:body>
</f:view>
</html>
menu.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"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html" encoding="UTF-8">
<!-- ################################################################# -->
<!-- ## Header -->
<h:head>
<f:facet name="first">
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
</f:facet>
</h:head>
<h:body>
Menu page
</h:body>
</f:view>
</html>
managedbean
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.validation.constraints.Size;
/**
*
* #author Wittakarn
*/
#SessionScoped
#ManagedBean(name = "signInView")
public class SignInView implements Serializable{
#Size(min=2,max=5)
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String signIn(){
System.out.println("username = " + username);
return "/menu.xhtml";
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<welcome-file-list>
<welcome-file>login.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
Below is my code for my file upload page and I can't figure out why when the upload is done it doesn't update my datatable with if the upload was successful or not. I could do a like a do not render til after update but don't think that is supported with the fileupload command. I did a system out on my list and it does have the values in it so the list is fully populated and ready to display but my datatable isn't showing anything? Am I missing something?
Tomcat 7.0
JSF 2.2.1
Chrome/IE/Firefox
PrimeFaces 5.0
<?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:p="http://primefaces.org/ui">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
template="templates/template.xhtml">
<ui:define name="title">Ingest</ui:define>
<ui:define name="metadata">
</ui:define>
<ui:define name="content">
<h:form>
<p:fileUpload fileUploadListener="#{ingestBean.ingestListener}"
label="choose" invalidFileMessage="Invalid file: "
allowTypes="/(\.|\/)(xml)$/" multiple="true" update="#form">
</p:fileUpload>
<p:dataTable var="errors" value="#{ingestBean.errorList}" id="errorTable">
<p:column headerText="File Name">
<h:outputText value="#{errors.fileName}" />
</p:column>
<p:column headerText="Status">
<h:form>
<h:commandLink action="#{ingestBean.getErrorInfo}"
value="errors.status">
<f:param name="id" value="#{errors.id}" />
</h:commandLink>
</h:form>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</html>
Edit: After a bunch of testing and code rewriting I have got it partially working but it seems like it doesn't like to render in my template code... So I was wondering if there may be something wrong in my template code.
Template code:
<!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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html" id="fview">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><ui:insert name="title">Page template with PrimeFaces</ui:insert></title>
<ui:debug />
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:head>
<style>
#leftPanel {
z-index: 1 !important;
}
#leftPanel div {
overflow: visible;
}
</style>
</h:head>
<h:body onload="statusDialog.hide();">
<h:outputStylesheet library="css" name="style.css" />
<p:ajaxStatus onstart="statusDialog.show();"
onsuccess="statusDialog.hide();" />
<p:layout fullPage="true" resizeTitle="resize"
style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="202" header="Menu" id="leftPanel">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit styleClass="layoutUnitCenter" position="center">
<h:form id="mainForm">
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
After a bunch of testing and deleting and rewriting like all my code I have figured out it was a stupid error with layouts and the <f:view> so I removed that and
<p:ajaxStatus onstart="statusDialog.show();"
onsuccess="statusDialog.hide();" />
And everything seemed to work fine!
I am trying to create an application using JSF and Primefaces. Unfortunately, I have an issue about page templates and could not manage to work it out properly.
I have a page template like this. What I want is to load Left Menu and the Content with ajax request without loading whole page. However, when I click the page2 link, everything gets broken like this.
I tried different combinations of how to place form, include, composition tags but, it's still the same. Only change is my server response according to place of form tag. When I checked the response it seems alright. It does not try to load whole page and nothing seems wrong to me:
<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1"><changes><update id="javax.faces.ViewRoot"><![CDATA[<script id="innerLayout_s" type="text/javascript">$(function(){PrimeFaces.cw( "Layout","widget_innerLayout",{id:"innerLayout",widgetVar:"widget_innerLayout",west:{paneSelector:'#left',size:"200",resizable:false,closable:false},center:{paneSelector:'#innerContent',size:"auto",resizable:false,closable:false}},"layout");}) ;</script><div id="innerLayout"><div id="left" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west"><div class="ui-layout-unit-header ui-widget-header ui-corner-all"><span class="ui-layout-unit-header-title">Left Menu</span></div><div class="ui-layout-unit-content ui-widget-content">
<form id="leftForm" name="leftForm" method="post" action="/Magician/pages/page2.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="leftForm" value="leftForm" />
Page2 Left Menu
</form></div></div><div id="innerContent" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center"><div class="ui-layout-unit-content ui-widget-content">
<form id="contentForm" name="contentForm" method="post" action="/Magician/pages/page2.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="contentForm" value="contentForm" />
Page2 Content
</form></div></div></div>]]></update><update id="j_id1:javax.faces.ViewState:0"><![CDATA[2499963408064928377:-8018685353649439725]]></update></changes></partial-response>
However, when I look the console, there is an error like below:
Uncaught TypeError: Cannot read property '0' of null primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.Utils.updateElement primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.ResponseProcessor.doUpdate primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.Response.handle primefaces.js.xhtml?ln=primefaces&v=5.0:2
p.success primefaces.js.xhtml?ln=primefaces&v=5.0:2
i jquery.js.xhtml?ln=primefaces&v=5.0:25
cd.fireWith jquery.js.xhtml?ln=primefaces&v=5.0:25
cg jquery.js.xhtml?ln=primefaces&v=5.0:25
i
Here are my codes:
default.xhtml:
<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:p="http://primefaces.org/ui">
<h:head>
<title>My Application</title>
</h:head>
<h:body>
<h:outputStylesheet name="css/style.css" />
<p:layout id="fullPageLayout" fullPage="true">
<p:layoutUnit id="header" position="north" size="80">
<h:form id="headerForm">
<ui:insert name="headerUI">
<ui:include src="header.xhtml" />
</ui:insert>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="content" position="center">
<ui:insert name="contentUI" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
header.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<p:tabMenu id="tabMenu" activeIndex="#{templateBean.activeIndex}">
<p:menuitem value="page1" action="#{templateBean.navigateToPage(0)}" update=":contentForm,tabMenu" />
<p:menuitem value="page2" action="#{templateBean.navigateToPage(1)}" update=":contentForm,tabMenu" />
</p:tabMenu>
</ui:composition>
content.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<p:layout id="innerLayout">
<p:layoutUnit id="left" position="west" size="200" header="Left Menu">
<h:form id="leftForm">
<ui:insert name="leftUI" />
</h:form>
</p:layoutUnit>
<p:layoutUnit id="innerContent" position="center">
<h:form id="contentForm">
<ui:insert name="centerUI" />
</h:form>
</p:layoutUnit>
</p:layout>
</ui:composition>
index.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="templates/default.xhtml">
<ui:define name="contentUI">
<ui:include src="#{templateBean.activePage}.xhtml" />
</ui:define>
</ui:composition>
page1.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="templates/content.xhtml">
<ui:define name="leftUI">
<h:outputText value="Page1 Left Menu" />
</ui:define>
<ui:define name="centerUI">
<h:outputText value="Page1 Content" />
</ui:define>
</ui:composition>
page2.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="templates/content.xhtml">
<ui:define name="leftUI">
<h:outputText value="Page2 Left Menu" />
</ui:define>
<ui:define name="centerUI">
<h:outputText value="Page2 Content" />
</ui:define>
</ui:composition>
TemplateBean.java:
package com.myapplication.pagebeans;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
#Component
#Scope("request")
public class TemplateBean {
private int activeIndex;
private String activePage = "page1";
public String navigateToPage(int index) {
activeIndex = index;
switch (index) {
case 0:
activePage = "page1";
break;
case 1:
activePage = "page2";
break;
default:
break;
}
return activePage;
}
public int getActiveIndex() {
return activeIndex;
}
public String getActivePage() {
return activePage;
}
}
Sorry for the long question and images (site does not let me to load images because of my reputation) but, I tried give information as much as I can.
Thanks in advance.
I searched a lot and already look at different questions like below ones:
How to include common content into multiple level template page
How to include another XHTML in XHTML using JSF 2.0 Facelets?
Facelets multi-level templates - ui:define not rendered
PrimeFaces exension javascript error
I have spring integrated with JSF and I am facing a strange behavior:
I hit the command button the action method in the managed bean is hit successfully (I removed it in the below example).
The Ajax update works perfect and the form is updated.
I hit another button the action method now in the managed bean isn't hit.
The panel is restored to the initial view and it freezes on this view.
I can't get the form updated except if I refresh the page and these steps are repeated.
DealerInfo.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/templates/default.xhtml">
<ui:define name="content">
<h:form id="toolBarForm">
<p:toolbar style="margin-bottom:5px;">
<p:toolbarGroup align="right">
<p:commandButton value="Add"
update=":toolBarForm" icon="ui-icon-plusthick" />
</p:toolbarGroup>
</p:toolbar>
<p:messages id="dealerInfoMessages" />
<ui:include src="/pages/dealers/DealerMainInfo.xhtml" />
</h:form>
</ui:define>
</ui:composition>
</html>
pages/dealers/DealerMainInfo.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<p:panel id="dealerMainInfoPanel" header="Dealer Main Info"
style="margin-bottom:5px;">
<h:panelGrid columns="2">
<p:outputLabel for="dealerCode" value="Dealer Code" />
<p:inputText id="dealerCode" required="true"
value="#{dealerMainInfoBO.dealerCode}" style="width:200px;" />
<p:outputLabel for="dealerName" value="Dealer Name" />
<p:inputText id="dealerName" required="true"
value="#{dealerMainInfoBO.dealerName}" style="width:200px;" />
</h:panelGrid>
</p:panel>
</ui:composition>
</html>
Update:
I created a very simple single page and I noticed that when I remove the <h:head></h:head> tags the ajax works like a charm BUT without the fancy primefaces UI, and when I add the tags the ajax stop (this is normal cause <h:head></h:head> tags fetch all the needed JSs and CSSs), What Can I Do?
Example.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<h:form id="toolBarForm">
<p:toolbar style="margin-bottom:5px;">
<p:toolbarGroup align="right">
<p:commandButton value="Add" update=":toolBarForm"
action="#{bean.add}" />
</p:toolbarGroup>
</p:toolbar>
<p:messages id="operationDefinitionMessages" />
<h:panelGrid columns="2">
<p:outputLabel for="text" value="Text" />
<p:inputText id="text" required="true" value="#{bean.text}" />
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
My Environment
Primefaces:3.5
JSF-Mojarra:2.2
Spring:3.2.3.RELEASE
In case anyone faces the same issue. I noticed that the Primefaces showcase is using JSF-Mojarra-2.1.22. I downgraded my JSF-Mojarra version from 2.2 to 2.1.22 and it worked like a charm.
If I am not wrong, I guess it should be reported to primefaces (if it isn't a current issue).