f:ajax wont render h:panelGroup - ajax

this is the code :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<f:metadata>
<f:event type="preRenderView" listener="#{recBean.permission()}"/>
</f:metadata>
<h:head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<title>Reclamation</title>
</h:head>
<h:body>
<b:navBar brand="Reclamations" brandHref="ReclamationAll.xhtml" >
<b:navbarLinks>
<b:navLink value="Etats des Reclamation" href="InterventionAll.xhtml"></b:navLink>
<b:navLink value="Contrat" href="ContratAll.xhtml"></b:navLink>
<b:navLink value="La liste de nos produit" href="produitAll.xhtml"></b:navLink>
</b:navbarLinks>
</b:navBar>
<f:view>
<script type="text/javascript">
function success() {
toastr.success("Réclamation ajouté avec success !");
}
</script>
<h:form>
<h1><h:outputText value="Reclamation"/></h1>
<h:panelGroup id="result">
<h:panelGrid columns="2" cellpadding="2" >
<h:outputLabel value="Client:" for="client" />
<b:selectOneMenu id="client" value="#{sessionScope.idcli}" disabled="#{sessionScope.idcli==null ? false : true }" >
<!-- fixed -->
<f:selectItems value="#{recBean.clientSelect}" />
</b:selectOneMenu>
<h:outputLabel value="Produit:" for="produit" />
<b:selectOneMenu id="produit" value="#{recBean.idproduit}" >
<!-- fixed -->
<f:selectItems value="#{recBean.produitSelect}" />
</b:selectOneMenu>
<h:outputLabel value="Nom De Reclamation" for="descCli" />
<b:inputText id="nomRec" value="#{recBean.rec.nomRec}" title="Nom De Reclamation" required="true" requiredMessage="The DescCli field is required."/>
<h:outputLabel value="DateCreRec:" for="dateCreRec" />
<b:dateTimePicker id="dateCreRec" show-date="true" mode="toggle-icon" required="true" use-current="true" value="#{recBean.rec.dateCreRec}"/>
<h:outputLabel value="TypeRec:" for="type"/>
<h:selectOneRadio id ="type" value="#{recBean.type}">
<f:selectItem itemValue="réclamation logiciel" itemLabel="Reclamation Logiciel"></f:selectItem>
<f:selectItem itemValue="réclamation technique" itemLabel="Reclamation technique"></f:selectItem>
</h:selectOneRadio>
<h:outputLabel value="DescCli:" for="descCli" />
<b:inputTextarea id="descCli" value="#{recBean.rec.descCli}" title="DescCli" required="true" requiredMessage="The DescCli field is required."/>
<h:outputLabel value="DegUrgence:" for="degUrgence" />
<b:selectOneMenu id="degUrgence" value="#{recBean.degreurgence}" >
<f:selectItem itemValue="" itemLabel=""></f:selectItem>
<f:selectItem itemValue="1" itemLabel="urgente"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="très urgente"></f:selectItem>
<f:selectItem itemValue="3" itemLabel="pas urgente"></f:selectItem>
</b:selectOneMenu>
</h:panelGrid>
</h:panelGroup>
<b:form horizontal="true">
<b:commandButton value="Ajouter" action="#{recBean.ajouter()}" onclick="success();" >
<f:ajax execute="#form" render="result" />
</b:commandButton>
<b:commandButton value="retourner a la liste " action="ReclamationAll.xhtml"/>
</b:form>
</h:form>
</f:view>
</h:body>
</html>
i puted a panelGrid into panelGroup hoping to render the panel group id with the commandButton using ajax render
and i get this error when i open the page :
message Invalid search expression: result The subexpression result
doesn't exist, or it can't be resolved.
net.bootsfaces.component.commandButton.CommandButton
j_idt11:j_idt33:j_idt34 Additional information: ID not found: result
search expression: result
Am I doing something wrong here? Thank you beforehand.

Related

My form inside a dialog keeps values when i re-open dialog

i am using a form inside a dialog to edit some data , i use setPropertyActionListener tag to get this data from a dataTable , my form shows correctly all fields , but when i change some data and close the dialog and reopen it (without submuting) the form keeps the latest data and ignore what is coming from setPropertyActionListener
here is my code used to open the dialog
<p:menuButton value="Actions">
<p:menuitem resetValues="true" value="Update"
icon="fa fa-edit" process="#this"
actionListener="#{myMB.resetSelectedEntite(a)}"
update="formUpdateAff:displayEditionAff"
oncomplete="PF('affUpdateDialogWidget').show()">
<f:setPropertyActionListener
target="#{myMB.selectedAffectation}" value="#{a}" />
<f:actionListener
type="com.dummy.AffActionListener" />
</p:menuitem>
code for dialog :
<!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"
xmlns:p="http://primefaces.org/ui">
<h:body>
<p:dialog widgetVar="affUpdateDialogWidget" id="affEditerDialogId"
width="30%" showEffect="explode" hideEffect="explode" modal="true">
<h:form id="formUpdateAff" prependId="true">
<p:panel style="margin-bottom:20px;float:center"
widgetVar="titlePanelWidget" collapsed="true"
styleClass="customTitleBar">
<f:facet name="header">
Update
</f:facet>
</p:panel>
<p:tooltip position="top" />
<h:panelGrid id="displayEditionAff" columns="3" cellpadding="4">
<p:outputLabel value="" />
<h:inputHidden value="#{myMB.selectedAffectation.id}" id="idAff" />
<p:message for="idAff" display="tooltip" />
<p:outputLabel value="Date Aff :" for="dateAffectId" />
<p:calendar value="#{myMB.selectedAffectation.dateAff}"
id="dateAffectId" pattern="dd/MM/yyyy" yearRange="c-10:c+0"
showButtonPanel="true" converter="primefacesCalendarConverter"
required="true" locale="fr" showOn="button" />
<p:message for="dateAffectId" display="tooltip" />
<p:outputLabel value="Ville :" for="villeIdAff" />
<p:selectOneMenu style="width:100%; font-weight:bold"
required="true" id="villeIdAff" appendTo="#this"
value="#{myMB.selectedAffectation.refCompagnie.refGroupement.refVille.id}"
rendered="#{myMB.selectedAffectation.refCompagnie.id != 0}">
<f:selectItem itemLabel="----------------" itemValue="" />
<f:selectItems value="#{lieuUnitMB.selectLieuxByType('VILLE',0)}"
var="a" itemValue="#{a.id}" itemLabel="#{a.libelle}" />
<p:ajax
listener="#{myMB.loadGroupements(myMB.selectedAffectation.refCompagnie.refGroupement.refVille.id , myMB.selectedAffectation.refCompagnie.refGroupement.refCatGroupement.id)}"
update="groupIdAff groupIdxxx" />
</p:selectOneMenu>
<p:selectOneMenu style="width:100%; font-weight:bold"
rendered="#{myMB.selectedAffectation.refCompagnie.id == 0}"
required="true" id="villeId2" appendTo="#this"
value="#{myMB.selectedAffectation.refGroupement.refVille.id}">
<f:selectItem itemLabel="----------------" itemValue="" />
<f:selectItems value="#{lieuUnitMB.selectLieuxByType('VILLE',0)}"
var="a" itemValue="#{a.id}" itemLabel="#{a.libelle}" />
<p:ajax
listener="#{myMB.loadGroupements(myMB.selectedAffectation.refGroupement.refVille.id , myMB.selectedAffectation.refGroupement.refCatGroupement.id)}"
update="groupIdAff groupIdxxx" />
</p:selectOneMenu>
<p:message for="villeId2" display="tooltip" />
<p:outputLabel value="Catégorie Groupement :" for="catIdAff" />
<p:selectOneMenu style="width:100%; font-weight:bold"
required="true" id="catIdAff" appendTo="#this"
value="#{myMB.selectedAffectation.refGroupement.refCatGroupement.id}"
rendered="#{myMB.selectedAffectation.refCompagnie.id == 0}">
<f:selectItem itemLabel="----------------" itemValue="" />
<f:selectItems value="#{repositoryMB.selectRepositories()}" />
<p:ajax
listener="#{myMB.loadGroupements(myMB.selectedAffectation.refGroupement.refVille.id , myMB.selectedAffectation.refGroupement.refCatGroupement.id)}"
update="groupIdAff groupIdxxx" />
</p:selectOneMenu>
<p:selectOneMenu style="width:100%; font-weight:bold"
required="true" id="catId2" appendTo="#this"
value="#{myMB.selectedAffectation.refCompagnie.refGroupement.refCatGroupement.id}"
rendered="#{myMB.selectedAffectation.refCompagnie.id != 0}">
<f:selectItem itemLabel="----------------" itemValue="" />
<f:selectItems value="#{repositoryMB.selectRepositories()}" />
<p:ajax
listener="#{myMB.loadGroupements(myMB.selectedAffectation.refCompagnie.refGroupement.refVille.id , myMB.selectedAffectation.refCompagnie.refGroupement.refCatGroupement.id)}"
update="groupIdAff groupIdxxx" />
</p:selectOneMenu>
<p:message for="catIdAff" display="tooltip" />
<p:outputLabel value="Groupement :" for="groupIdAff" />
<p:selectOneMenu
value="#{myMB.selectedAffectation.refCompagnie.refGroupement.id}"
style="width:100%; font-weight:bold" required="true"
id="groupIdAff" appendTo="#this"
rendered="#{myMB.selectedAffectation.refCompagnie.id != 0}">
<f:selectItem itemLabel="----------------" itemValue="" />
<f:selectItems
value="#{myMB.loadGroupements(myMB.selectedAffectation.refCompagnie.refGroupement.refVille.id , myMB.selectedAffectation.refCompagnie.refGroupement.refCatGroupement.id)}" />
<p:ajax
listener="#{myMB.loadCompagniesUpdate(myMB.selectedAffectation.refGroupement.id)}"
update="displayEditionAff,toto" />
</p:selectOneMenu>
<p:selectOneMenu
value="#{myMB.selectedAffectation.refGroupement.id}"
style="width:100%; font-weight:bold" required="true"
id="groupIdxxx" appendTo="#this"
rendered="#{myMB.selectedAffectation.refCompagnie.id == 0}">
<f:selectItem itemLabel="----------------" itemValue="" />
<f:selectItems
value="#{myMB.loadGroupements(myMB.selectedAffectation.refGroupement.refVille.id , myMB.selectedAffectation.refGroupement.refCatGroupement.id)}" />
<p:ajax
listener="#{myMB.loadCompagniesUpdate(myMB.selectedAffectation.refGroupement.id)}"
update="displayEditionAff,toto" />
</p:selectOneMenu>
<p:message for="groupIdAff" display="tooltip" />
<p:outputLabel value="Compagnie :" for="toto"
binding="#{myMB.uiOutputLabel}"
rendered="#{not empty myMB.compagniesUpdate}" />
<p:selectOneMenu binding="#{myMB.uiOutput}"
rendered="#{not empty myMB.compagniesUpdate}"
value="#{myMB.selectedAffectation.refCompagnie.id}"
style="width:100%; font-weight:bold" required="false" id="toto"
appendTo="#this" immediate="true">
<f:selectItem itemLabel="----------------" itemValue="" />
<f:selectItems
value="#{myMB.loadCompagniesUpdate(myMB.selectedAffectation.refGroupement.id)}" />
</p:selectOneMenu>
<p:message for="toto" display="tooltip"
rendered="#{not empty myMB.compagniesUpdate}"
binding="#{myMB.uiOutputMsg}" />
</h:panelGrid>
<p:spacer />
<p:spacer />
<h:panelGrid columns="2">
<p:commandButton value="Editer" icon="ui-icon-plus"
action="#{myMB.updateEntite()}"
update=":entiteDetailDialogForm:tabsId:formAff:AffTable :messageGrowl :formUpdateAff"
process=":formUpdateAff"
oncomplete="closeDialogIfSucess(xhr, status, args, 'AffUpdateDialogWidget', 'AffEditerDialogId')" />
<p:commandButton value="#{bundle.cancel}" icon="ui-icon-cancel"
actionListener="#{myMB.resetSelectedEntite()}" type="button"
onclick="PF('AffUpdateDialogWidget').hide();" />
</h:panelGrid>
</h:form>
</p:dialog>
</h:body>
</html>
i am using Primefaces 6.1

Validations are not working except first tab of wizard and data loss between tabs

I am trying to use wizard with Primefaces (ViewScoped) . I created the page with 4 tabs. After navigating first tab, user reaches second tab and user enters some values to the input text fields at this second tab page. When the user goes the previous or next tab from second tab and comes back to this second tab all the entered values are lost except first tab. Also validations are not working except first tab.Is there a solution for this problem? Here is my html code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
template="template/template.xhtml">
<ui:define name="body">
<h:graphicImage value="resources/myimage.jpg" />
<!-- First Tab -->
<h:form id="form">
<p:growl id="growl" sticky="true" showDetail="true"/>
<p:wizard flowListener="#{myView.onFlowProcess}" widgetVar="wiz">
<p:tab id="person" title="PERSON">
<p:panel header="">
<p:messages />
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="NAME :" />
<p:inputText value="#{myView.user.firstname}" label="Name" validatorMessage="NAME ERROR">
<f:validateRegex pattern="[a-zA-Z]{2,50}+"/>
</p:inputText>
<h:outputText value="SURNAME: *" />
<p:inputText value="#{myView.user.lastname}" label="Surname" validatorMessage="SURNAME ERROR">
<f:validateRegex pattern="[a-zA-Z]{2,60}+"/>
</p:inputText>
<h:outputText value="obligatory" style="color:red;"/>
</h:panelGrid>
</p:panel>
</p:tab>
<!-- ADDRESS -->
<p:tab id="address" title="ADDRESS">
<p:panel header="">
<p:messages />
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="cellular Phone" />
<p:inputMask id="cellularPhone" value="#{myView.user.cellularPhone}" mask="59999999999" required="true" requiredMessage="CELLULAR PHONE CANNOT BE EMPTY"/>
<h:outputText value="Cellular Phone :" style="color:red;" />
<h:outputText value="" />
<h:outputText value="Email :" />
<p:inputText value="#{myView.user.email}" />
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="country" value="country" />
<p:selectOneMenu id="country" value="#{dropDownView.country}" style="width:150px">
<p:ajax listener="#{dropDownView.onCountryChange}" update="city" />
<f:selectItem itemLabel="please Select" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropDownView.countries}" />
</p:selectOneMenu>
<p:outputLabel for="city" value="city" />
<p:selectOneMenu id="city" value="#{dropDownView.city}" style="width:150px">
<f:selectItem itemLabel="please Select" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropDownView.cities}" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator />
<h:outputText value="obligatory" style="color:red;"/>
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="confirm" title="PAYMENT">
<p:panel header="">
<p:commandButton value="SAVE" action="#{myView.save}" update="growl" oncomplete="wiz.next();" process="#this" validateClient="true"/>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</ui:define>
</ui:composition>

<f:ajax> Parent is not composite component or of type ClientBehaviorHolder on a selection one menu

I am trying to get a second selection method to show up depending on what was selected for the first value. Now i need to do this over 38 times for a form i am making but i want to see if i can get it working for one question first. Here is the code i have so far cut on the jsf page. The values are all the same for the other 38 questions. I just recreated the project and so far the bean is currently empty but i know i should be able to atleast see the form first which is what i am hoping to do for now before i add the values and 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:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" >
<h:head>
<title>QC-Form</title>
</h:head>
<h:body>
<h1 class="title">QC Form</h1>
<br/> <br/>
<font face="comic sans MS" size="2" color="#33CCFF">
<p><b>Enter the information below: </b> </p>
</font>
<h:form>
<font face="comic sans MS" size="2">
<b>Your initials: </b>
<h:inputText value="#{qcFormBean.techNameValue}"/><br/>
<br/>
<b>Model #: </b>
<h:selectOneMenu value="#{qcFormBean.modelValue}">
<f:selectItem itemValue="3600" itemLabel="3600" />
<f:selectItem itemValue="7200" itemLabel="7200" />
<f:selectItem itemValue="8300" itemLabel="8300" />
<f:selectItem itemValue="8400" itemLabel="8400" />
<f:selectItem itemValue="8500p" itemLabel="8500p" />
<f:selectItem itemValue="8800" itemLabel="8800" />
<f:selectItem itemValue="9000" itemLabel="9000" />
<f:selectItem itemValue="9008" itemLabel="9008" />
<f:selectItem itemValue="9200" itemLabel="9200" />
<f:selectItem itemValue="9300" itemLabel="9300" />
</h:selectOneMenu><br/>
<br/>
<b>Date : </b>
<h:outputText value="#{currentDate}"/>
<br/> <br/>
<b>Serial #: </b>
<h:inputText value="#{qcFormBean.serialValue}"/><br/>
<br/>
<b>Customer Name: </b>
<h:inputText value="#{qcFormBean.customerNameValue}"/><br/>
<br/>
<b>Special Instructions: </b>
<h:inputText value="#{qcFormBean.specialInstructionsValue}"/><br/>
</font>
<font face="comic sans MS" size="2" color="#33CCFF">
<p><b>QC Process</b> </p>
</font>
<font face="comic sans MS" size="2">
<b>1.Unit Serial number has been applied: </b>
<h:selectOneMenu value="#{qcFormBean.unitSerialValue}">
<f:selectItem itemValue="P" itemLabel="Pass or Not Applicable" />
<f:selectItem itemValue="A" itemLabel="FAIL-Nonfunctional" />
<f:selectItem itemValue="B" itemLabel="FAIL-Intermittent" />
<f:selectItem itemValue="C" itemLabel="FAIL-Incorrect" />
<f:selectItem itemValue="D" itemLabel="FAIL-DLI Standard" />
<f:selectItem itemValue="F" itemLabel="FAIL-Special Standard" />
<f:selectItem itemValue="G" itemLabel="FAIL-Physical" />
</h:selectOneMenu>
<br/>
<br/>
<b>2.Screen Protector has been applied: </b>
<h:panelGroup id="dliSticker">
<h:selectOneMenu value="#{qcFormBean.dlitcStickerValue}">
<f:selectItem itemValue="P" itemLabel="Pass or Not applicable" />
<f:selectItem itemValue="M" itemLabel="FAIL-Mechanical" />
<f:selectItem itemValue="E" itemLabel="FAIL-Electrical" />
<f:selectItem itemValue="C" itemLabel="FAIL-Cosmetic" />
<f:selectItem itemValue="S" itemLabel="FAIL-Software" />
<f:ajax event="change" execute="#this" render="perfbyDlitcSticker" />
</h:selectOneMenu>
</h:panelGroup>
<h:panelGroup id="perfbyDlitcSticker">
<h:selectOneMenu value="#{qcFormBean.stickerFreq}"
rendered="#{!qcFormBean.dliStickerValue eq 'P'}">
<f:selectItem itemValue="A" itemLabel="Always" />
<f:selectItem itemValue="O" itemLabel="Often" />
<f:selectItem itemValue="S" itemLabel="Seldom" />
</h:selectOneMenu>
</h:panelGroup>
<br/>
</font>
</h:form>
</h:body>
</html>
Here is the error code i am getting with this code:
/indexv2.xhtml at line 88 and column 76 Parent is not composite component or of type ClientBehaviorHolder, type is: javax.faces.component.UIViewRoot#13fcf10
Caused by:
javax.faces.view.facelets.TagException - /indexv2.xhtml at line 88 and column 76 Parent is not composite component or of type ClientBehaviorHolder, type is: javax.faces.component.UIViewRoot#13fcf10
Remove the f:ajaxs outside of the h:selectOneMenu. h:form is no ClientBehaviourHolder so you can not place a f:ajax there. You just can put them into the h:selectOneMenu.
EDIT: Just remove the f:ajax without the parameters, those which wrap the panelGroups and keep the selectOneMenues:
<h:selectOneMenu value="#{qcFormBean.dlitcStickerValue}">
<f:selectItem itemValue="P" itemLabel="Pass or Not applicable" />
<f:selectItem itemValue="M" itemLabel="FAIL-Mechanical" />
<f:selectItem itemValue="E" itemLabel="FAIL-Electrical" />
<f:selectItem itemValue="C" itemLabel="FAIL-Cosmetic" />
<f:selectItem itemValue="S" itemLabel="FAIL-Software" />
<f:ajax event="change" execute="#this" render="perfbyDlitcSticker" />
</h:selectOneMenu>
EDIT2: Replace the code between </b> and the <br/> before the commandButton with the following code:
<h:panelGroup id="dliSticker">
<h:selectOneMenu value="#{qcFormBean.dlitcStickerValue}">
<f:selectItem itemValue="P" itemLabel="Pass or Not applicable" />
<f:selectItem itemValue="M" itemLabel="FAIL-Mechanical" />
<f:selectItem itemValue="E" itemLabel="FAIL-Electrical" />
<f:selectItem itemValue="C" itemLabel="FAIL-Cosmetic" />
<f:selectItem itemValue="S" itemLabel="FAIL-Software" />
<f:ajax event="change" execute="#this" render="perfbyDlitcSticker" />
</h:selectOneMenu>
</h:panelGroup>
<h:panelGroup id="perfbyDlitcSticker">
<h:selectOneMenu value="#{qcFormBean.stickerFreq}"
rendered="#{!qcFormBean.dliStickerValue eq 'P'}">
<f:selectItem itemValue="A" itemLabel="Always" />
<f:selectItem itemValue="O" itemLabel="Often" />
<f:selectItem itemValue="S" itemLabel="Seldom" />
</h:selectOneMenu>
</h:panelGroup>
instead of using 'f:ajax' i used instead richfaces 'a4j:ajax' parameter for the xhtml and while now i have a different issue "The web page with the tags wont show up only text." so i can't really tell if i converted to richfaces correctly but here is what i change let me know if i am right or not thank you.
<!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:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j" >
<h:head>
<title>QC-Form</title>
<link href="./css/styles.css"
rel="stylesheet" type="text/css"/>
</h:head>
<f:view>
<h:body>
<h1 class="title">QC Form</h1>
<br/> <br/>
<font face="comic sans MS" size="2" color="#33CCFF">
<p><b>Enter the information below: </b> </p>
</font>
<h:form>
<font face="comic sans MS" size="2">
<h:panelGroup id="initialInfo">
<b>Your initials: </b>
<h:inputText value="#{qcFormBean.techNameValue}"/><br/>
<br/>
<b>Model #: </b>
<h:selectOneMenu value="#{qcFormBean.modelValue}">
<f:selectItem itemValue="3600" itemLabel="3600" />
<f:selectItem itemValue="7200" itemLabel="7200" />
<f:selectItem itemValue="8300" itemLabel="8300" />
<f:selectItem itemValue="8400" itemLabel="8400" />
<f:selectItem itemValue="8500p" itemLabel="8500p" />
<f:selectItem itemValue="8800" itemLabel="8800" />
<f:selectItem itemValue="9000" itemLabel="9000" />
<f:selectItem itemValue="9008" itemLabel="9008" />
<f:selectItem itemValue="9200" itemLabel="9200" />
<f:selectItem itemValue="9300" itemLabel="9300" />
</h:selectOneMenu><br/>
<br/>
<b>Date : </b>
<h:outputText value="#{currentDate}"/>
<br/> <br/>
<b>Serial #: </b>
<h:inputText value="#{qcFormBean.serialValue}"/><br/>
<br/>
<b>Customer Name: </b>
<h:inputText value="#{qcFormBean.customerNameValue}"/><br/>
<br/>
<b>Special Instructions: </b>
<h:inputText value="#{qcFormBean.specialInstructionsValue}"/><br/>
</h:panelGroup>
</font>
<font face="comic sans MS" size="2" color="#33CCFF">
<p><b>QC Process</b> </p>
</font>
<font face="comic sans MS" size="2">
<h:panelGroup id="dliSerial">
<b>1.Unit Serial number has been applied: </b>
<h:selectOneMenu value="#{qcFormBean.unitSerialValue}">
<f:selectItems value="#{qcFormBean.valueQcValue}"/>
</h:selectOneMenu>
<br/>
</h:panelGroup>
<br/>
<b>2.Screen Protector has been applied: </b>
<h:panelGroup id="dliSticker">
<h:selectOneMenu value="#{qcFormBean.dliStickerValue}">
<f:selectItem itemValue="P" itemLabel="Pass or Not applicable" />
<f:selectItem itemValue="M" itemLabel="FAIL-Mechanical" />
<f:selectItem itemValue="E" itemLabel="FAIL-Electrical" />
<f:selectItem itemValue="C" itemLabel="FAIL-Cosmetic" />
<f:selectItem itemValue="S" itemLabel="FAIL-Software" />
<a4j:ajax event="change" execute="#this" render="perfbyDliSticker" limitRender="true" />
</h:selectOneMenu>
</h:panelGroup>
<h:panelGroup id="perfbyDlitcSticker">
<h:selectOneMenu value="#{qcFormBean.stickerFreq}"
rendered="#{!qcFormBean.dliStickerValue eq 'P'}">
<f:selectItem itemValue="A" itemLabel="Always" />
<f:selectItem itemValue="O" itemLabel="Often" />
<f:selectItem itemValue="S" itemLabel="Seldom" />
</h:selectOneMenu>
</h:panelGroup>
<br/>
</font>
</h:form>
</h:body>
</f:view>
</html>

datatable doesn't be updated with ajax in primefaces

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.

richfaces rendering for IE8

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"/>

Resources