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"/>
Related
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.
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>
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.
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 included pages in prime faces tab. I have used id based form in each page. when I enable ajax for each page, then it is not working in the tab.
My prime-face index.xhtml page is below.
index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="templet.xhtml">
<ui:define name="top">
<h1>Qubit Student Management System</h1>
</ui:define>
<ui:define name="content">
<h:form id="menu">
<p:menubar autoDisplay="true">
<p:submenu id="admin" label="Admin">
<p:submenu id="institute" label="Institute Setup">
<p:menuitem id="addInstitute" value="Add Info" action="#{ajaxBean.editAction}" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="InstituteInformation"/>
</p:menuitem>
<p:menuitem id="viewInstitute" value="View Info" action="#{ajaxBean.editAction}" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="InstituteView"/>
</p:menuitem>
<p:menuitem id="editInstitute" value="Edit Info" action="#{ajaxBean.editAction}" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="InstituteEdit"/>
</p:menuitem>
</p:submenu>
<p:submenu id="campus" label="Campus Setup">
<p:menuitem id="addCampus" value="Add Campus" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="CampusInformation"/>
</p:menuitem>
<p:menuitem id="viewCampus" value="View Campus" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="CampusList"/>
</p:menuitem>
<p:menuitem id="editCampus" value="Edit Campus" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="CampusEdit"/>
</p:menuitem>
</p:submenu>
<p:submenu id="department" label="Department Setup">
<p:menuitem id="addDepartment" value="Add Department" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="DepartmentInformation"/>
</p:menuitem>
<p:menuitem id="viewDepartment" value="View Department" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="DepartmentList"/>
</p:menuitem>
<p:menuitem id="editDepartment" value="Edit Department" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="DepartmentEdit"/>
</p:menuitem>
</p:submenu>
</p:submenu>
<p:submenu id="student" label="Student">
<p:menuitem id="studentAdd" value="Student Add" action="#{ajaxBean.editAction}" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="StudentAdd"/>
</p:menuitem>
<p:menuitem id="studentList" value="Student List" action="#{ajaxBean.editAction}" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="StudentList" />
</p:menuitem>
<p:menuitem id="studentAdmission" value="Student Admission" action="#{ajaxBean.editAction}" ajax="true" update=":outputForm">
<f:setPropertyActionListener target="#{ajaxBean.action}" value="StudentAdmission" />
</p:menuitem>
</p:submenu>
</p:menubar>
</h:form>
<h:form id="outputForm">
<p:tabView id="outputTab">
<p:ajax event="tabClose" listener="#{ajaxBean.closeTab}"/>
<c:forEach items="#{ajaxBean.chcekItem}" var="item" varStatus="loop">
<p:tab id="#{item}" title="#{item}" closable="true">
<ui:include src="#{bundle[item]}"/>
</p:tab>
</c:forEach>
</p:tabView>
</h:form>
Template
</ui:define>
<ui:define name="bottom">
<h2 class="center">QubitLab Limited</h2>
</ui:define>
</ui:composition>
other some page below.
institute/Create.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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="#{bundle.InstituteInfo}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form id="institutesetupform">
<h:panelGroup id="messagePanel" layout="block">
<h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
</h:panelGroup>
<h:panelGrid columns="2">
<h:outputLabel value="#{bundle.CreateInstituteLabel_instituteCode}" for="instituteCode" />
<h:inputText id="instituteCode" value="#{instituteController.selected.instituteCode}" title="#{bundle.CreateInstituteTitle_instituteCode}" required="true" requiredMessage="#{bundle.CreateInstituteRequiredMessage_instituteCode}"/>
<h:outputLabel value="#{bundle.CreateInstituteLabel_instituteName}" for="instituteName" />
<h:inputText id="instituteName" value="#{instituteController.selected.instituteName}" title="#{bundle.CreateInstituteTitle_instituteName}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_location}" for="location" />
<h:inputText id="location" value="#{instituteController.selected.location}" title="#{bundle.CreateInstituteTitle_location}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_phone}" for="phone" />
<h:inputText id="phone" value="#{instituteController.selected.phone}" title="#{bundle.CreateInstituteTitle_phone}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_email}" for="email" />
<h:inputText id="email" value="#{instituteController.selected.email}" title="#{bundle.CreateInstituteTitle_email}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_fax}" for="fax" />
<h:inputText id="fax" value="#{instituteController.selected.fax}" title="#{bundle.CreateInstituteTitle_fax}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_web}" for="web" />
<h:inputText id="web" value="#{instituteController.selected.web}" title="#{bundle.CreateInstituteTitle_web}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_about}" for="about" />
<h:inputTextarea rows="4" cols="30" id="about" value="#{instituteController.selected.about}" title="#{bundle.CreateInstituteTitle_about}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_mission}" for="mission" />
<h:inputTextarea rows="4" cols="30" id="mission" value="#{instituteController.selected.mission}" title="#{bundle.CreateInstituteTitle_mission}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_vision}" for="vision" />
<h:inputTextarea rows="4" cols="30" id="vision" value="#{instituteController.selected.vision}" title="#{bundle.CreateInstituteTitle_vision}" />
<h:outputLabel value="#{bundle.CreateInstituteLabel_scop}" for="scop" />
<h:inputTextarea rows="4" cols="30" id="scop" value="#{instituteController.selected.scop}" title="#{bundle.CreateInstituteTitle_scop}" />
</h:panelGrid>
<br />
<h:commandButton action="#{instituteController.create}" value="#{bundle.CreateInstituteSaveLink}">
<f:ajax execute="institutesetupform" render="institutesetupform:messagePanel"/>
</h:commandButton>
<br />
</h:form>
</ui:define>
</ui:composition>
department/Create.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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="#{bundle.CreateDepartmentTitle}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form id="departmentsetupform">
<h:panelGroup id="messagePanel" layout="block">
<h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
</h:panelGroup>
<h:panelGrid columns="2">
<h:outputLabel value="#{bundle.CreateDepartmentLabel_departmentId}" for="departmentId" />
<h:inputText id="departmentId" value="#{departmentController.selected.departmentId}" title="#{bundle.CreateDepartmentTitle_departmentId}" required="true" requiredMessage="#{bundle.CreateDepartmentRequiredMessage_departmentId}"/>
<h:outputLabel value="#{bundle.CreateDepartmentLabel_departmentName}" for="departmentName" />
<h:inputText id="departmentName" value="#{departmentController.selected.departmentName}" title="#{bundle.CreateDepartmentTitle_departmentName}" />
<h:outputLabel value="#{bundle.CreateDepartmentLabel_history}" for="history" />
<h:inputText id="history" value="#{departmentController.selected.history}" title="#{bundle.CreateDepartmentTitle_history}" />
<h:outputLabel value="#{bundle.CreateDepartmentLabel_program}" for="program" />
<h:inputText id="program" value="#{departmentController.selected.program}" title="#{bundle.CreateDepartmentTitle_program}" />
</h:panelGrid>
<br />
<h:commandButton action="#{departmentController.create}" value="#{bundle.CreateDepartmentSaveLink}" >
<f:ajax execute="departmentsetupform" render="departmentsetupform:messagePanel"/>
</h:commandButton>
<br />
<br />
<h:commandButton action="#{departmentController.prepareList}" value="#{bundle.CreateDepartmentShowAllLink}" immediate="true"/>
<br />
</h:form>
</ui:define>
when run every those page individually ajax can found form id but when i include those pages in index.xhtml page tab by clicking on menu item then it show
<f:ajax> contains an unknown id 'departmentsetupform' - cannot locate it in the context of the component j_idt266
any one here help me for this regard..
instead of referring to to the departmentsetupform form inside itself refer to #form and instead of formname:messagePanel refer directly to messagePanel like this
<f:ajax execute="#form" render="messagePanel"/>