in the page below, the datatable doesn't be updated by dialog even if I put its id in update attribute and I don't have any error :
<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">
<h:body>
<ui:composition template="/template/layout.xhtml">
<ui:define name="contenu">
<p:growl id="messages" showDetail="true" />
<h:form>
<p:commandButton value="Ajouter Type" id="ajax" onclick="dlg.show()" />
<p:dialog id="dialog" header="Nouveau Type" widgetVar="dlg">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="libelle" value="Libelle :" />
<p:inputText value="#{typeMB.newtype.libelle}" id="libelle" required="true" label="libelle" />
<h:outputLabel for="commission" value="commission :" />
<h:inputText value="#{typeMB.newtype.commission}" id="commission" required="true" label="commission" />
<f:facet name="footer">
<p:commandButton id="ajouterBoutton" value="Ajouter" update="growl,:form:ourdatatable" actionListener="#{typeMB.ajouter}"
oncomplete="handleLoginRequest(xhr, status, args)" />
</f:facet>
<p:growl style="z-index=100" id="growl" showDetail="true" life="3000" />
</h:panelGrid>
</p:dialog>
<script type="text/javascript">
function handleLoginRequest(xhr, status, args) {
if(args.validationFailed || !args.loggedIn) {
jQuery('#dialog').effect("shake", { times:3 }, 100);
} else {
dlg.hide();
}
}
</script>
</h:form>
<h:form id="form">
<p:dataTable var="car" id="ourdatatable" value="#{typeMB.list_types}" editable="true">
<p:ajax event="rowEdit" listener="#{typeMB.onEdit}" update=":messages" />
<p:ajax event="rowEditCancel" listener="#{typeMB.onCancel}" update=":messages" />
<p:column headerText="Numero" style="width:30%">
<h:outputText value="#{car.idtype}" />
</p:column>
<p:column headerText="Libellé" style="width:20%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.libelle}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.libelle}" style="width:100%" label="Libellé" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Commission" style="width:24%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.commission}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.commission}" style="width:100%" label="Commission" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6%">
<p:rowEditor />
</p:column>
<p:column>
<p:commandLink value="Supprimer" process="#this" update=":confirmDialog" oncomplete="confirmation.show()">
<f:setPropertyActionListener value="#{car}" target="#{typeMB.selectedType}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
<p:confirmDialog id="confirmDialog" message="Etes vous sur de vouloir supprimer ce Type #{typeMB.selectedType.libelle}"
header="confirmation de suppression" severity="alert" widgetVar="confirmation">
<h:form>
<p:commandButton id="confirm" value="oui" update=":form:ourdatatable" oncomplete="confirmation.hide()" actionListener="#{typeMB.supprimer}" />
<p:commandButton id="decline" value="non" onclick="confirmation.hide()" type="button" />
</h:form>
</p:confirmDialog>
</ui:define>
</ui:composition>
</h:body>
</html>
the datatable is updated only when I refresh the page
I tested with only one h:form for the whole of the page but it causes me problems with adding and updating features
Edit:
here is my layout (I think it is not the src of problem):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Intégration de la Bootstrap et Primefaces</title>
<h:outputStylesheet library="css" name="css/bootstrap.css" />
<h:outputStylesheet library="css" name="bootstrap.css" />
<h:outputStylesheet library="css" name="css/bootstrap-responsive.css" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<h:outputScript library="js" name="js/html5shiv.js" />
<![endif]-->
<link rel="shortcut icon" href="ico/favicon.png" />
</h:head>
<h:body>
<ui:include src="menu_haut.xhtml" />
<div class="container-fluid">
<div class="row-fluid">
<ui:include src="menu_gauche.xhtml" />
<div class="span9">
<div class="bs-docs-example">
<ui:insert name="contenu">
contenu par défaut!
</ui:insert>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<ui:include src="footer.xhtml" />
</div>
</h:body>
</f:view>
</html>
instead of update=":form:ourdatatable" use update=":#{p:component('ourdatatable')}"
this helper component searches the dom to resolve any namespace qualification for the identifier used in argument.
Related
I have a problem with selection primefaces datatable. When I choose any record my setter doesn't invoke. I found couple solution like change template or change to ViewSCope I'm changing everything but still does't work
template.xhtml
<!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:c="http://java.sun.com/jsf/composite/custom"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Social Test</title>
</f:facet>
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="css/style.css" />
<h:outputStylesheet name="bootstrap/css/bootstrap-social.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
<!-- h:outputScript name="js/script.js" /-->
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
<div id="footer"></div>
</h:body>
</html>
ticketEdit.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">
<ui:composition template="/template/template.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:c="http://java.sun.com/jsf/composite/custom"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h2 class="form-signin-heading">#{labRes.add_ticket}</h2>
<h:form id="form">
<p:accordionPanel>
<p:tab title="#{labRes.train_details}">
<h:panelGrid columns="2" cellpadding="10">
<c:autoComplete
completeMethod="#{ticketBean.trainAutoCompleteBean.complete}"
minQueryLength="2"
converter="#{ticketBean.trainAutoCompleteBean.converter}"
nameLable="#{labRes.train_number}"
autoValue="#{ticketBean.selectedTrain}" forceSelection="true"
queryDelay="500" effect="fade" cid="ticketAuto" listener="null"
labelStyleClass="labelPaddingParameter" ajax="true"
update="#form" />
<c:inputText id="nr" cid="cnr"
nameLable="#{labRes.train_number}" disabled="true"
inputValue="#{ticketBean.selectedTrain.name}"
labelStyleClass="labelPaddingParameter" />
</h:panelGrid>
</p:tab>
<p:tab title="#{labRes.train_details}">
<h:panelGrid columns="1" cellpadding="10" id="pgTrainDetails">
<c:calendar pattern="MM-dd-yyyy" value="#{ticketBean.day}"
isListener="true" update=":form" ajax="true"
nameLable="#{labRes.departure_date}" cid="depDat"
listener="#{ticketBean.onDateSelect}" />
<p:dataTable var="schedule" value="#{ticketBean.tripSchedules}"
selectionMode="single"
selection="#{ticketBean.selectedSchedule}"
rowKey="#{schedule.id}" styleClass="pickListWidth"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5" id="scheduleTable">
<f:facet name="header">
<c:calendar pattern="MM-dd-yyyy" value="#{ticketBean.day}"
isListener="true" update=":form" ajax="true"
nameLable="#{labRes.departure_date}" cid="depDat"
listener="#{ticketBean.onDateSelect}" />
</f:facet>
<p:column headerText="#{menRes.id}" sortBy="#{schedule.id}"
style=" text-align:center">
<h:outputText value="#{schedule.id}" />
</p:column>
<p:column headerText="#{labRes.departure_time}"
sortBy="#{schedule.departure}" style="text-align:center">
<h:outputText value="#{schedule.departure}" />
</p:column>
</p:dataTable>
</h:panelGrid>
</p:tab>
<p:tab title="#{labRes.ticket_details}">
<h:panelGrid columns="2" cellpadding="10">
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
</ui:define>
My bean (I'm using Spring) but I have to use #ViewScope because spring does't contain #Scope('view')
// the same annotations in AbstractBean
#Component
#ViewScope //faces bean package
public class TicketBean extends AbstractBean {
... code ...
public TripSchedule getSelectedSchedule() {
return selectedSchedule;
}
public void setSelectedSchedule(TripSchedule selectedSchedule) {
this.selectedSchedule = selectedSchedule;
}
Thanks for help !
I think you need to add some ajax to the datatable:
<p:ajax event="rowSelect"/>
<p:ajax event="rowUnselect"/>
I am new to PrimeFaces and I am having trouble getting simple validation messages to display. Below is my simple JSF page. Can someone point me in the right direction as what I am doing wrong?
<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>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>Add Tournament</title>
</h:head>
<h:body>
<h:form>
<p:layout fullPage="true" >
<p:layoutUnit position="center">
<f:view>
<div align="center">
<h1><h:outputText value="Create/Edit Tournament"/></h1>
<p:panel>
<p:messages globalOnly="false" id="msgs" autoUpdate="true"/>
<p:panelGrid columns="2">
<p:outputLabel value="TournamentName:" for="tournamentName" />
<p:inputText required="true" id="tournamentName" value="#{tournamentProfile.tournament.tournamentName}" title="TournamentName" requiredMessage="Tournament name is required." />
<p:outputLabel value="" for="addTournament" />
<p:commandButton validateClient="true" update="msgs" id="addTournament" value="Add Tournament" />
</p:panelGrid>
</p:panel>
</div>
</f:view>
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</f:view>
</html>
I have problems after click on submit button. Primafaces validation is executed and the calendars buttons dissapears.
The structure of the application view is a principal page that contains other. In the principal page which name is "welcomePrimefaces" I call to the other page wich name is left_layoutUnit using a ui:include
I am using primefaces 3.5, Mojarra 2.1.6
Somebody could help me???
welcomePrimefaces.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
<script type="text/javascript">
function handleLoginRequest(xhr, status, args) {
if(args.validationFailed || !args.loggedIn) {
jQuery('#dialog').effect("shake", { times:3 }, 100);
} else {
dlg.hide();
jQuery('#loginLink').fadeOut();
}
}
</script>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" styleClass="ui-layout-header">
<ui:include src="header_layoutUnit.xhtml" />
</p:layoutUnit>
<p:layoutUnit id="footer" position="south" size="100" closable="false" collapsible="false">
<ui:include src="footer_layoutUnit.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="500" closable="false" collapsible="false">
<ui:include src="left_layoutUnit.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" styleClass="ui-layout-center">
<ui:include src="right_layoutUnit.xhtml" />
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
left_layoutUnit.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">
<h:head>
<h:form id="form">
<p:panel id="panel" header="Panel Title">
<p:messages id="msgs"/>
<p:panelGrid id="theGrid" columns="1">
<p:row>
<p:column>
<p:calendar value="#{formBean.date1}" id="popupButtonCal1" showOn="button" maxlength="8" size="15"
required="true" requiredMessage="Fecha ida is required"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:calendar value="#{formBean.date2}" id="popupButtonCal2" showOn="button" maxlength="8" size="15"
required="true" requiredMessage="Fecha vuelta is required"/>
</p:column>
</p:row>
<p:dialog header="Selected Dates" widgetVar="dialog" showEffect="fade" hideEffect="fade">
<h:panelGrid id="display" columns="1">
<h:outputText value="Popup Button Date: " />
<h:outputText id="popupButtonDate">
<f:convertDateTime pattern="d/M/yyyy"/>
</h:outputText>
</h:panelGrid>
</p:dialog>
<p:row>
<p:column>
<p:commandButton value="Submit" update="panel" actionListener="#{formBean.buscarVuelos}"/>
</p:column>
</p:row>
</p:panelGrid>
</p:panel>
</h:form>
</h:head>
Running Netbeans 7.1.1 with latest JRE/JDK and Glassfish 3.1 on Windows 7.0.
Despite what sort of application I build, for some reason I have to click any commandLink or commandButton twice to get event to fire.
How is this caused and how can I solve it?
Here's an example of such a view where this problem occurs:
<?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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>Time Manager - New Employee</title>
</h:head>
<h:body>
<h:form id="form"">
<p:panel id="panel" header="New Employee">
<p:messages id="msgs"/>
<h:panelGrid columns="3">
<h:outputLabel for="fname" value="Firstname: *" />
<p:inputText id="fname" value="#{employee.name}"
required="true" label="FullName">
<f:validateLength minimum="2" maximum="20" />
</p:inputText>
<p:message for="fname" display="icon"/>
<h:outputLabel for="eml" value="Email: *" />
<p:inputText id="eml" value="#{employee.email}"
label="Email" required="true">
<f:validateLength minimum="9" maximum="100" />
<p:ajax update="msgEml" event="keyup" />
</p:inputText>
<p:message for="eml" id="msgEml" display="icon"/>
</h:panelGrid>
<p:button id="btn" value="Cancel" update="panel"
type="button" outcome="/index"/>
<p:commandButton id="addEmp" value="Save" update="panel"
actionListener="#{employee.saveEmployee}"
styleClass="ui-priority-primary"/>
</p:panel>
</h:form>
</h:body>
</html>
I have developed a demo application a Customer Demographics Wizard in RichFaces3.3.3. Everything is running fine on GoogleChrome and Mozilla Firefox. But facing problem in running the same in IE8. In IE8 wizard's First page is displaying fine, but after clicking the next button while trying to navigate to the next page no form is displaying.
IE8 is displaying error like this :
User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)
Timestamp: Tue, 11 Dec 2012 11:08:28 UTC
Message: Unknown runtime error
Line: 120
Char: 1
Code: 0
URI: http: //localhost:8400/BBGUServer/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript.jsf
Can anyone help me out where is the problem.
Thanks in advance..
Following code giving error in IE8 RichFaces3.3.3
Pls see the code given below. Along with this the .java bean files I am not giving, because I dnt think those will be required.
Here start.xhtml is the home page where custStep1.xhtml is loaded. After giving some value in the form when I navigate to the next page by clicking the button "Next" nothing of "custStep2" form is displaying. Only the parent forms drop downs (as you can see those i start.xhtml) are showing. And typically this special problem is occurring in IE8. Everything is running fine in Firefox/Chrome...........
--------------------------------------- Start of start.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:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<script type='text/javascript'>
//<![CDATA[
function setSkinValue(skinName)
{
Seam.Component.getInstance('skinBean').setSkin(skinName, function()
{
Seam.Remoting.log('reloading window');
window.location.reload(false);
});
}
//]]>
</script>
<style type="text/css">
.wizard { width:800px; }
.wform td { vertical-align:right; }
.wfcol1 { text-align: right; white-space:nowrap;}
.s1row td { height:30px; }
.rich-message { color:red; }
.navPanel {
position:absolute;
bottom:0;
height:30px;
margin:0;
padding:2px;
}
</style>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<br/>
<h:panelGrid width="800px" border="0">
<a4j:keepAlive beanName="customerBean" />
<rich:panel styleClass="wizard">
<f:facet name="header">
<h:outputText value="BBGUI Customer Demographics..." />
</f:facet>
<h:form id="mainForm" dir="#{customerBean.textDirection}">
<rich:comboBox
id="language"
selectFirstOnUpdate="false"
defaultLabel=""
value="#{customerBean.languageName}"
enableManualInput="false"
width="100">
<f:selectItem itemValue="English"/>
<f:selectItem itemValue="Arabic"/>
<a4j:support event="onselect" reRender="mainForm" action="#{customerBean.changeLanguage}"/>
</rich:comboBox>
<br/><br/>
<rich:comboBox
id="theme"
selectFirstOnUpdate="false"
defaultLabel="Emerald Town"
value="#{skinBean.skin}"
enableManualInput="false"
width="100">
<f:selectItem itemValue="emeraldTown"/>
<f:selectItem itemValue="blueSky"/>
<f:selectItem itemValue="wine"/>
<f:selectItem itemValue="japanCherry"/>
<f:selectItem itemValue="plain"/>
<f:selectItem itemValue="ruby"/>
<f:selectItem itemValue="classic"/>
<f:selectItem itemValue="laguna"/>
<f:selectItem itemValue="deepMarine"/>
<a4j:support event="onselect" reRender="mainForm" action="javascript:setSkinValue(this.value);"/>
</rich:comboBox>
<rich:comboBox
id="country1"
selectFirstOnUpdate="false"
defaultLabel=""
value="#{accountBean.countryCD}"
enableManualInput="false"
width="200">
<f:selectItems value="#{accountBean.countryItems}" />
</rich:comboBox>
<br/><br/>
<a4j:include viewId="#{customerBean.formName}" />
</h:form>
</rich:panel>
</h:panelGrid>
<br/>
</ui:composition>
--------------------------------------- End of start.xhtml
--------------------------------------- End of cust_step1.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:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE8" />
</head>
<div style="position:relative;height:140px">
<h:panelGrid id ="custFrm1" width="750px" columns="4" border="0" cellspacing="0" cellpadding="0">
Customer No:
<h:inputText id="customerNo" value="#{customerBean.data.customerno}" size="30" styleClass="inputText"/>
<h:outputText id="fnamelbl" value="#{customerBean.fnamelbl}:" size="30"/>
<h:inputText id="firstName" value="#{customerBean.data.firstname}" size="30" styleClass="inputText"/>
Last Name:
<h:inputText id="lastName" value="#{customerBean.data.lastname}" size="30" styleClass="inputText"/>
E-Mail:
<h:inputText id="eMail" value="#{customerBean.data.emailaddress}" size="30" styleClass="inputText"/>
Creation Date:
<rich:calendar id="creationDate" value="#{customerBean.data.creationdate}" size="30"/>
Country:
<rich:comboBox
id="country"
selectFirstOnUpdate="false"
defaultLabel=""
value="#{customerBean.countryCD}"
enableManualInput="false"
width="200" dir="#{customerBean.textDirection}">
<f:selectItems value="#{customerBean.countryItems}" />
<a4j:support event="onselect" reRender="state"/>
</rich:comboBox>
State:
<rich:comboBox
id="state"
selectFirstOnUpdate="false"
defaultLabel=""
value="#{customerBean.stateCD}"
enableManualInput="false"
width="200">
<f:selectItems value="#{customerBean.stateItems}" />
<a4j:support event="onselect" reRender="city"/>
</rich:comboBox>
City:
<rich:comboBox
id="city"
selectFirstOnUpdate="false"
defaultLabel=""
value="#{customerBean.cityCD}"
enableManualInput="false"
width="200">
<f:selectItems value="#{customerBean.cityItems}" />
</rich:comboBox>
</h:panelGrid>
<BR /><BR />
<h:panelGroup>
<h:outputText value=" " />
<h:outputText value="Enter Customer No:" />
<h:inputText id="custNo" value="#{customerBean.custNumberToSearch}" required="true"/>
<a4j:commandButton id="retrieveButton" value="#{customerBean.retrieveButtonName}" reRender="custFrm1" styleClass="submitButton" action="#{customerBean.actionSearch}"/>
<a4j:commandButton id="newCustButton" value="#{customerBean.newCustButtonName}" reRender="custFrm1" styleClass="submitButton" action="#{customerBean.actionNewCust}"/>
<a4j:commandButton id="nextButton" style="float:right" action="next" value="Next >>"/>
</h:panelGroup>
</div>
<rich:hotKey key="alt+n"
handler="#{rich:element('nextButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
<rich:hotKey selector="#custNo" key="return"
handler="#{rich:element('retrieveButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
</ui:composition>
--------------------------------------- End of cust_step1.xhtml
--------------- Start of cust_step2.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:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE8" />
</head>
<div style="position:relative;height:140px">
<h:panelGroup>
<rich:simpleTogglePanel switchType="client" label="Customer Properties">
<rich:dataTable id="custPropertyData" width="723px" value="#{customerBean.data.customerPropertyList}"
var="custPropData"
columnClasses="10,10,10,10"
onRowMouseOver="this.style.backgroundColor='#B5F3FB'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'"
styleClass="table">
<rich:column width="220px">
<f:facet name="header">Property Id</f:facet>
<h:outputText id="propertyID" value="#{custPropData.propertyid}" />
</rich:column>
<rich:column width="220px">
<f:facet name="header">Property Name</f:facet>
<h:outputText id="propertyName" value="#{custPropData.property}" />
</rich:column>
<rich:column width="220px">
<f:facet name="header">Property Value</f:facet>
<h:inputText id="propertyValue" value="#{custPropData.propertyvalue}" />
</rich:column>
</rich:dataTable>
</rich:simpleTogglePanel>
</h:panelGroup>
<BR /><BR />
<h:panelGroup>
<a4j:commandButton value="#{customerBean.saveButtonName}"
styleClass="submitButton"
action="#{customerBean.actionSave}"
oncomplete="if(#{customerBean.custSaveFlag == true})
{#{rich:component('successPopup')}.show()}
else
{#{rich:component('errorPopup')}.show()}"/>
<a4j:commandButton
value="#{customerBean.storePropButtonName}"
styleClass="submitButton"
oncomplete="#{rich:component('editPanel')}.show()">
<f:setPropertyActionListener value="#{customerBean}"
target="#{customerBean}"/>
</a4j:commandButton>
<a4j:commandButton id="prevButton" value="<<Previous" style="float:right" immediate="true" action="previous"/>
</h:panelGroup>
</div>
<rich:modalPanel id="successPopup" modal="true" autosized="true" resizeable="false" width="300">
<f:facet name="header">
<h:outputText value="Unicorn" />
</f:facet>
<h:panelGrid columns="1" >
<h:outputText id="idText" value="#{customerBean.saveSuccessfullMsg}" />
<h:commandButton action="#" onclick="#{rich:component('successPopup')}.hide(); return false;" value="Cancel"/>
</h:panelGrid>
</rich:modalPanel>
<rich:modalPanel id="errorPopup" autosized="true" width="300">
<f:facet name="header">
<h:outputText value="Unicorn" />
</f:facet>
<h:panelGrid columns="1" >
<h:outputText id="idText1" value="#{customerBean.saveErrorMsg}" />
<h:commandButton action="#" onclick="#{rich:component('errorPopup')}.hide(); return false;" value="Cancel"/>
</h:panelGrid>
</rich:modalPanel>
<rich:hotKey key="alt+b"
handler="#{rich:element('prevButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
<rich:modalPanel id="editPanel" autosized="true" width="450">
<f:facet name="header">
<h:outputText value="Save Customer Property" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<rich:componentControl for="editPanel" attachTo="hidelink" operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<h:form id="form1">
<rich:messages style="color:red;"></rich:messages>
<h:panelGrid columns="1">
<a4j:outputPanel ajaxRendered="true">
<h:panelGrid columns="2">
<h:outputText value="Property Name" />
<rich:comboBox
id="propname"
selectFirstOnUpdate="false"
defaultLabel=""
value="#{customerBean.propertyName}"
enableManualInput="false"
width="250">
<f:selectItems value="#{customerBean.propertyItems}" />
</rich:comboBox>
<h:outputText value="Property Value" />
<h:inputText id="propval" value="#{customerBean.propertyValue}"/>
</h:panelGrid>
<rich:message showSummary="true" showDetail="false" for="propname" />
</a4j:outputPanel>
<a4j:commandButton value="Store"
action="#{customerBean.actionPropertyStore}"
reRender="custPropertyData"
oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.hide();"/>
</h:panelGrid>
</h:form>
</rich:modalPanel>
</html>
--------------- End of cust_step2.xhtml
--------------- Start of faces-Config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
<lifecycle>
<phase-listener>mypackage.ActionListener</phase-listener>
</lifecycle>
<managed-bean>
<managed-bean-name>skinBean</managed-bean-name>
<managed-bean-class>mypackage.SkinBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<managed-bean>
<managed-bean-name>customerBean</managed-bean-name>
<managed-bean-class>mypackage.CustomerBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<managed-bean>
<managed-bean-name>accountBean</managed-bean-name>
<managed-bean-class>mypackage.AccountBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/Customer/cust_step1.xhtml</from-view-id>
<navigation-case>
<from-outcome>next</from-outcome>
<to-view-id>/Customer/cust_step2.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/Customer/cust_step2.xhtml</from-view-id>
<navigation-case>
<from-outcome>previous</from-outcome>
<to-view-id>/Customer/cust_step1.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
--------------- End of faces-Config.xml
You wrote
<a4j:commandButton id="nextButton" style="float:right" action="next" value="Next >>"/>
replace above with
<a4j:commandButton id="nextButton" style="float:right" action="#{customerBean.nextAction}" value="Next"/>