i have three tab that invoke separate composite Component. my problem is, when i click on button, there is no action happend. but when i open my composite component page separately my buttons work clearly.my Buttons Are in Tab3. when in invoke ""bizbiz:inviteRequest"" in Tab3, my buttons dosnot work.
could you please see my code ?
<h:body>
<h:form>
<p:tabView >
<p:tab id="tab1" title="#{businessPartner_msg.supplier}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:supplier/>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="#{businessPartner_msg.customer}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:customer/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="#{businessPartner_msg.inviteRequest}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:inviteRequest/>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</h:body>
my buttons in tab3 . here is Tab3
<composite:implementation>
<table style="width: 100%" id="tabell">
<p:selectOneButton value="#{inviteRequestManagedBean.filterType}">
<f:selectItem itemLabel="#{inviteRequest_msg.request}" itemValue="request" />
<f:selectItem itemLabel="#{inviteRequest_msg.archive}" itemValue="archive" />
<f:ajax event="change" execute="#form" render="#form" />
<tr>
<td>
<p:panel></p:panel>
<p:dataGrid id="requestDataGrid" var="tBusinessPartnerRequestInfo"
value="#{inviteRequestManagedBean.filterBusinessRequest()}" columns="1" >
<p:column>
<div>
<table border="0" width="100%">
<tr>
<td>
<p:graphicImage value="#{tBusinessPartnerRequestInfo.partySender_imageUrl}"/>
</td>
<td>
<div>
<table border="0" width="100%">
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.requestDate}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.partySender_fullName}"/>
</td>
</tr>
</table>
</div>
</td>
<td>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
actionListener="#{inviteRequestManagedBean.acceptRequest(tBusinessPartnerRequestInfo.id)}"
update="#form"/>
</td>
<td>
<p:commandButton id="noNowCommonButton" value="#{inviteRequest_msg.notnow}"
actionListener="#{inviteRequestManagedBean.notNowRequest(tBusinessPartnerRequestInfo.id)}"
update="#form"/>
</td>
<p:blockUI block="acceptCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="acceptCommonButton" trigger="noNowCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="noNowCommonButton"/>
<td>
<p:panel>
<p:ajaxStatus>
<f:facet name="start">
<p:graphicImage value="../resources/img/loading.gif"/>
</f:facet>
<f:facet name="complete">
<h:outputLabel value=""/>
</f:facet>
</p:ajaxStatus>
</p:panel>
</td>
</tr>
</table>
</div>
<hr/>
</p:column>
</p:dataGrid>
</td>
</tr>
</p:selectOneButton>
</table>
</composite:implementation>
Related
I am using Primefaces 5.2 on an internal network that uses IE11 in compatibility mode. I have a button and a table. When I press the button I get a new row in the table just fine but I also get an empty table <table></table> inserted between the button and the table. This happened each and every time I press the button - three presses three unwanted empty tables.
Sanitized JSF source follows:
<tr>
<td>
<h:outputText value="#{enr['birth.date']}"/>*:
</td>
<td>
<p:calendar id="birthDate" value="#{II.birthdate}" mode="popup" showOn="button" popupIconOnly="true" pattern="yyyy-MM-dd" mask="9999-99-99" maxdate="#{UserBean.currentDate}" yearrange="c-120" navigator="true" showButtonPanel="true" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['birth.date']}" tabindex="4"/>
<p:tooltip for="birthDate" value="yyyy-MM-dd" showEffect="fade" hideEffect="fade" />
</td>
</tr>
<tr>
<td>
<h:outputText value="#{enr['other.last.names']}"/> / <h:outputText value="#{enr['maiden.name']}"/>
</td>
<td>
<p:commandButton icon="ui-icon-plus" title="Icon Only" tabindex="5" immediate="true">
<f:ajax listener="#{II.addOtherName()}" immediate="true" render="otherNameFields"/>
</p:commandButton>
<h:dataTable id="otherNameFields" value="#{II.otherNames}" var="otherNameField">
<h:column size="30" maxlength="50">
<h:inputText value="#{otherNameField.otherName}" tabindex="6">
<f:ajax event="change" listener="#{II.populateName()}" immediate="true" render="otherNameFields" />
</h:inputText>
</h:column>
<h:column>
<p:commandButton icon="ui-icon-trash" title="Icon Only" immediate="true" tabindex="6">
<f:ajax listener="#{II.deleteOtherName(otherNameField)}" immediate="true" render="otherNameFields" />
</p:commandButton>
</h:column>
</h:dataTable>
</td>
</tr>
Here is the generated output I see in the DOM Explorer:
<tr>
<td>
<button name="dataForm:j_id605621413_2_2c601363" tabindex="5" title="Icon Only" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" id="dataForm:j_id605621413_2_2c601363" role="button" aria-disabled="false" onclick="PrimeFaces.bcn(this,event,[function(event){jsf.ajax.request('dataForm:j_id605621413_2_2c601363',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'click'})},function(event){PrimeFaces.ab({s:"dataForm:j_id605621413_2_2c601363"});return false;}]);" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-plus"></span><span class="ui-button-text ui-c">ui-button</span></button>
<table></table> <!-- the unwanted table element -->
<table id="dataForm:otherNameFields">
<tbody id="dataForm:otherNameFields:tbody_element">
<tr><td><input name="dataForm:otherNameFields:0:j_id605621413_2_2c6013ca" tabindex="6" id="dataForm:otherNameFields:0:j_id605621413_2_2c6013ca" onchange="jsf.ajax.request('dataForm:otherNameFields:0:j_id605621413_2_2c6013ca',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'change'})" type="text" value=""></td><td><button name="dataForm:otherNameFields:0:j_id605621413_2_2c601007" tabindex="6" title="Icon Only" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" id="dataForm:otherNameFields:0:j_id605621413_2_2c601007" role="button" aria-disabled="false" onclick="PrimeFaces.bcn(this,event,[function(event){jsf.ajax.request('dataForm:otherNameFields:0:j_id605621413_2_2c601007',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'click'})},function(event){PrimeFaces.ab({s:"dataForm:otherNameFields:0:j_id605621413_2_2c601007"});return false;}]);" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-trash"></span><span class="ui-button-text ui-c">ui-button</span></button></td></tr>
</tbody></table>
</td>
</tr>
Any
In my JEE application, I have an emails list extraction process. I need to display a counter which be incremented after adding a mail to the list. The idea is to display the size of this list and update it every 1 seconde using primeface poll. I procced like this:
EmailsExtraction.xhtml:
<h:body>
<h:form>
<h:panelGroup id="formblock" style="margin-top: 40px" layout="block" >
<p:panelGrid columns="2">
<p:outputLabel for="Keyword" value="Keywords: " />
<p:inputText id="Keyword" type="search" requiredMessage="Keyword is required" style="width: 600px"
value="#{mailMB.keyword}" required="true" label="Keyword">
</p:inputText>
<p:outputLabel for="Emailsnbr" value="Emails amount:" />
<p:inputText id="Emailsnbr" requiredMessage="Emails number is required" style="width: 590px"
value="#{mailMB.number}" required="true" label="Emailsnbr">
</p:inputText>
</p:panelGrid>
</h:panelGroup>
<p:spacer height="5px" />
<p:commandButton value="Start" style="width: 12%;height: 100%" id="extractbutton" ajax="true" widgetVar="ButtonExtract"
actionListener="#{mailMB.searchEmailsRym()}"
styleClass="ui-priority-primary"
onstart="blockUIWidget1.show();" oncomplete="play(); blockUIWidget1.hide(); if (args && !args.validationFailed) freeMails();">
</p:commandButton>
</h:form>
<p:dialog widgetVar="blockUIWidget1" header="Hitonclick" modal="true" resizable="false" closable="false" >
<table border="0" style="width: 500px">
<tbody >
<tr>
<td>
<p:graphicImage url="pictures/loading81.gif" width="200" height="200" alt="animated-loading-bar"/>
</td>
<td>
<h:form >
<p:outputLabel value="#{mailMB.count}" id="countOutPut"/>
<p:poll interval="1" update="countOutPut" listener="#{mailMB.increment}"/>
<div id="countdown_text">0</div>
<br></br>
<p:commandButton ajax="false" style="width: 100px;height: 40px" actionListener="#{mailMB.abortSearch()}" value="Cancel" styleClass="ui-priority-primary" title="Cancel" oncomplete="clearForm('formcounter'), clearForm('searchForm')"/>
</h:form>
</td>
</tr>
<div align="right">
</div>
</tbody>
</table>
</p:dialog>
</h:body>
ManagedBean.java:
private int count=0;
public void increment(){
count=mails.size();
}
// count getter & setter
But the count value is not updated.
I have button that when I click on it, the dialog appear and in that dialog , I have p:selectBooleanCheckBox and h:outputlable.
The first problem is when p:dialog appear I can not choose p:selectBooleanCheckBox separately. It means that when I click on one of them, all of p:selectBooleanCheckBox choose.
The second problem is when I click on p:commandButton in dialog , the actionListener work but it dos not disappaer and it shows permanently. I think the problem cause by Ajax. could you please tell me how can I fix this problem?
<h:panelGrid>
<p:dialog appendToBody="true" header="Selected Values" modal="false" showEffect="fade" hideEffect="fade" widgetVar="dlg">
<h:panelGrid columns="1" id="display">
<p:dataGrid id="AcceptDataGrid" var="tBusinessPartnerRequestInfo" value="#{inviteRequestManagedBean.filterBusinessRequest()}"
columns="1" >
<tr>
<td>
<p:selectBooleanCheckbox/>
</td>
<td>
<h:outputLabel value="test"/>
</td>
</tr>
</p:dataGrid>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
actionListener="#{inviteRequestManagedBean.acceptRequest(tBusinessPartnerRequestInfo.id)}"
update="display" />
</h:panelGrid>
</p:dialog>
</h:panelGrid>
<table style="width: 100%" id="tabell">
<p:selectOneButton value="#{inviteRequestManagedBean.filterType}">
<f:selectItem itemLabel="#{inviteRequest_msg.request}" itemValue="request" />
<f:selectItem itemLabel="#{inviteRequest_msg.archive}" itemValue="archive" />
<f:ajax event="change" execute="#form" render="#form" />
<tr>
<td>
<p:panel></p:panel>
<p:dataGrid id="requestDataGrid" var="tBusinessPartnerRequestInfo"
value="#{inviteRequestManagedBean.filterBusinessRequest()}" columns="1" >
<p:column>
<div>
<table border="0" width="100%">
<tr>
<td>
<p:graphicImage value="#{tBusinessPartnerRequestInfo.partySender_imageUrl}"/>
</td>
<td>
<div>
<table border="0" width="100%">
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.requestDate}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.partySender_fullName}"/>
</td>
</tr>
</table>
</div>
</td>
here is where p:dialog call
<td>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
onclick="dlg.show()" />
</td>
<td>
<p:commandButton id="noNowCommonButton" value="#{inviteRequest_msg.notnow}"
actionListener="#{inviteRequestManagedBean.notNowRequest(tBusinessPartnerRequestInfo.id)}"
update="#form" />
</td>
<p:blockUI block="acceptCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="acceptCommonButton" trigger="noNowCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="noNowCommonButton"/>
<td>
<p:panel>
<p:ajaxStatus>
<f:facet name="start">
<p:graphicImage value="../resources/img/loading.gif"/>
</f:facet>
<f:facet name="complete">
<h:outputLabel value=""/>
</f:facet>
</p:ajaxStatus>
</p:panel>
</td>
</tr>
</table>
</div>
<hr/>
</p:column>
</p:dataGrid>
</td>
</tr>
</p:selectOneButton>
</table>
</h:panelGrid>
<h:panelGrid>
<p:dialog appendToBody="true" header="Selected Values" modal="false" showEffect="fade" hideEffect="fade" widgetVar="dlg">
<h:panelGrid columns="1" id="display">
<p:dataGrid id="AcceptDataGrid" var="tBusinessPartnerRequestInfo" value="#{inviteRequestManagedBean.loadPartyRelationShipType()}"
columns="1" >
<tr>
<td>
<p:selectBooleanCheckbox/>
</td>
<td>
<h:outputLabel value="test"/>
</td>
</tr>
</p:dataGrid>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
actionListener="#{inviteRequestManagedBean.acceptRequest(tBusinessPartnerRequestInfo.id)}"
update="display" oncomplete="dlg.hide()" />
</h:panelGrid>
</p:dialog>
</h:panelGrid>
</ui:composition>
Your markup is a bit scary, I don't get why you've got so much thing in your <p:selectOneButton (all the <tr>'s) so instead of trying to correct everything as I start to understand what you try to achieve I'll give you a working example.
Sample.java
public class Sample implements Serializable {
private String name;
private boolean checked;
public Sample() {
}
public Sample(String name, boolean checked) {
this.name = name;
this.checked = checked;
}
// Getter and Setter for name and checked omitted
}
SampleBean.java
#ManagedBean
#ViewScoped
public class SampleBean implements Serializable {
private List<Sample> samples;
private Sample currentSample;
public void prepareEdit(Sample sample) {
this.currentSample = sample;
}
public void edit() {
// Do what you need to do with sample
// You can get it with : this.currentSample
RequestContext.getCurrentInstance().execute("dlg.hide()");
}
public List<Sample> getSamples() {
if (this.samples == null) {
this.samples = new ArrayList<Sample>();
for (int i = 1; i <= 10; ++i) {
this.samples.add(new Sample("Sample n°" + i, (i % 3 == 0)));
}
}
return samples;
}
public void setSamples(List<Sample> samples) {
this.samples = samples;
}
public Sample getCurrentSample() {
return currentSample;
}
public void setCurrentSample(Sample currentSample) {
this.currentSample = currentSample;
}
}
view.xhtml :
<h:form id="myForm">
<p:dataTable value="#{sampleBean.samples}" var="sample">
<p:column headerText="Name">
<h:outputText value="#{sample.name}" />
</p:column>
<p:column headerText="Checked?">
<h:outputText value="#{sample.checked}" />
</p:column>
<p:column style="width: 1px; text-align: center;">
<p:commandButton value="edit"
actionListener="#{sampleBean.prepareEdit(sample)}"
update=":dialog"
oncomplete="dlg.show()" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="dialog" widgetVar="dlg" header="Editing">
<h:form rendered="#{!empty sampleBean.currentSample}">
<h:outputText value="Current sample is #{sampleBean.currentSample.name}" />
<br />
<p:selectBooleanCheckbox value="#{sampleBean.currentSample.checked}" />
<br />
<p style="width: 100%; text-align: center;">
<p:commandButton actionListener="#{sampleBean.edit()}"
value="Edit"
update="#form :myForm" />
</p>
</h:form>
</p:dialog>
As you can see I'm storing a currentSample (sampleBean must be #ViewScoped) which helps me to render a custom dialog with the correct current information.
My last comment from your question about the binding of the <p:selectBooleanCheckbox is important because you can get a custom checkbox value only if it's bound to a different endpoint based on the context (here currentSample).
Don't hesitate to comment if something is unclear for you!
which pick data from DB (postgre),
this page first list the data in a list
then i have a commandlink "modificar" wich carry the data from the element clicked in a dialog
but i dont know why the commandbutton in this dialog doesnt invoke the method "DAOEventos.modificarEvento" ....
at the end i have a button that register data to the db from a dialog, this is OK works
the only problem i have is with the dialog comes from commandlink!
i made a debug and the problem is with "p:calendar" if i kick that, the method was invoked, but i need that value from the calendar!
<h:body>
<h:form id="form">
<p:dataTable style="width:100%" value="#{DAOEventos.listaEventos()}" var="even" >
<f:facet name="header">Listado de Eventos</f:facet>
<p:column filterBy="#{even.descripcion}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Evento"/>
</f:facet>
<h:outputText value="#{even.descripcion}"></h:outputText>
</p:column>
<p:column filterBy="#{even.fec}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Fecha"/>
</f:facet>
<h:outputText value="#{even.fec}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Modificar"/>
</f:facet>
<p:commandLink value="Modificar" oncomplete="dlg2.show();"
update="modalDialog2" action="#{beanEventos.traerDatos()}" style="color: black">
<f:setPropertyActionListener target="#{beanEventos.codEvento}" value="#{even.codEvento}" />
<f:setPropertyActionListener target="#{beanEventos.codSec}" value="#{even.codSec}" />
</p:commandLink>
<p:dialog id="modalDialog2" header="Modificar Eventos" widgetVar="dlg2" dynamic="true" resizable="false">
<h:form>
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento"/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento"/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha Evento"/>
<p:calendar value="#{beanEventos.fec}"
showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:selectBooleanCheckbox value="#{beanEventos.vigencia}"/>
<h:outputText value="Vigencia" style="font-weight:bold"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Modificar" action="#{DAOEventos.modificarEvento()}" />
</td>
</tr>
</table>
</h:form>
</p:dialog>
</p:column>
</p:dataTable>
<p/>
<p:commandButton id="showDialogButton" value="Agregar" oncomplete="dlg.show()" />
<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false" id="dialogo" >
<h:form>
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento "/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento "/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha de Evento"/>
<p:calendar value="#{beanEventos.fec}" id="cal" showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Registrar Evento"
action="#{DAOEventos.insertarEvento()}"/>
</td>
</tr>
</table>
</h:form>
</p:dialog>
</h:form>
</h:body>
You are nesting one HTML form inside another HTML form which is not a valid concept in HTML. Even if you doing this in JSF ultimate rendering component will be HTML only.So, remove
<h:form id="form"> from your code or try to keep all the above code inside single form.
Check here :
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
As SrinivasR said, you shouldn't (although this may work fine) nest forms.
But I think the issue here is with the place where you are defining your:
<p:dialog id="modalDialog2">...</p:dialog>
You should put it outside the datatable.
<h:body>
<h:form id="form">
<p:dataTable style="width:100%" value="#{DAOEventos.listaEventos()}" var="even" >
<f:facet name="header">Listado de Eventos</f:facet>
<p:column filterBy="#{even.descripcion}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Evento"/>
</f:facet>
<h:outputText value="#{even.descripcion}"></h:outputText>
</p:column>
<p:column filterBy="#{even.fec}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Fecha"/>
</f:facet>
<h:outputText value="#{even.fec}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Modificar"/>
</f:facet>
<p:commandLink value="Modificar" oncomplete="dlg2.show();"
update=":padding" actionListener="#{beanEventos.traerDatos()}" style="color: black">
<f:setPropertyActionListener target="#{beanEventos.codEvento}" value="#{even.codEvento}" />
<f:setPropertyActionListener target="#{beanEventos.codSec}" value="#{even.codSec}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
<p/>
<h:panelGroup id="padding" layout="block">
<p:dialog id="modalDialog2" header="Modificar Eventos" widgetVar="dlg2" dynamic="true" resizable="false">
<h:form id="form2">
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento"/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento"/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha Evento"/>
<p:calendar value="#{beanEventos.fec}"
showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:selectBooleanCheckbox value="#{beanEventos.vigencia}"/>
<h:outputText value="Vigencia" style="font-weight:bold"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Modificar" action="#{DAOEventos.modificarEvento()}" />
</td>
</tr>
</table>
</h:form>
</p:dialog>
</h:panelGroup>
<h:form id="form3">
<p:commandButton id="showDialogButton" value="Agregar" oncomplete="dlg.show()" />
<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false" id="dialogo" >
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento "/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento "/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha de Evento"/>
<p:calendar value="#{beanEventos.fec}" id="cal" showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Registrar Evento"
action="#{DAOEventos.insertarEvento()}"/>
</td>
</tr>
</table>
</p:dialog>
</h:form>
I have input fields and datatable in the same page, in such a way that when user adds a new data, data should be added to the datatable without refreshing the page.
To achieve this I tried the following code
xhtml part
<table border="0">
<tr>
<td width="700" height="100px">Customer Name: <h:inputText
immediate="true" id="customername" autocomplete="false" value="#{salesBean.customerName}">
</h:inputText>
</td>
</tr>
<tr>
<td width="900" height="160px">
<table border="1">
<tr>
<td align="left">Product Name</td>
<td align="left">Rate</td>
<td align="left">Quantity</td>
<td align="left">Total Price</td>
<td align="left">Paid</td>
<td align="left">Date of Sales</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><h:inputText immediate="true"
id="productname" autocomplete="false" value="#{salesBean.productName}">
</h:inputText></td>
<td align="left"><h:outputText id="rate"
binding="#{salesBean.productRate}" /></td>
<td align="left"><h:inputText size="2"
onkeyup="return calculateTotalRate(event);" id="quantity" value="#{salesBean.quantity}"/></td>
<td align="left"><h:outputText id="totalprice" /></td>
<td align="left"><h:selectOneRadio id="sor"
title="Select any one of the choice" value="#{salesBean.paidFlag}">
<f:selectItem id="si1" itemLabel="Yes" itemValue="yes" />
<f:selectItem id="si2" itemLabel="No" itemValue="no" />
</h:selectOneRadio></td>
<td align="left"><rich:calendar id="salesDate" value="#{salesBean.salesDate}"></rich:calendar></td>
<td align="center">
<h:commandButton value="Submit">
<a4j:support action="#{salesBean.submit}" reRender="table"></a4j:support>
</h:commandButton>
<h:commandButton value="Cancel" /></td>
</tr>
</table>`
</td>
</tr>
<tr>
<td>
<h:outputText id="errormessage" style="display:inline-block;color:Red;width:300px;"/>
</td>
</tr>
<tr>
<td>
<h:panelGroup id="panel">
<rich:dataTable var="data" id="table" binding="#{salesBean.table}" rendered="#{salesBean.salesHistoryRendered}">
<h:column>
<f:facet name="header">
<h:outputText value="Product Name"/>
</f:facet>
<h:outputText value="#{data.productName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Date of Sale"/>
</f:facet>
<h:outputText value="#{data.dateOfSales}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Is Paid?"/>
</f:facet>
<h:outputText value="#{data.paidCheck}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Quantity?"/>
</f:facet>
<h:outputText value="#{data.quantity}"/>
</h:column>
</rich:dataTable>
<h:outputText id="text" binding="#{salesBean.checkValueChangeListener}"/>
</h:panelGroup>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Please help me to solve this. Please update me if my question is not clear.
I am using JSF 1.2 and Richfaces 3.3.2
Thanks in advance
You have missed event attribute in a4j:support. Should be like this (disableDefault="true" is to prevent h:commandButton standard behavior):
<h:commandButton value="Submit">
<a4j:support event="onclick" disableDefault="true" action="#{salesBean.submit}" reRender="table"/>
</h:commandButton>
Or even better like this (will do the same as the lines above, but in more a4j-style):
<a4j:commandButton value="Submit" action="#{salesBean.submit}" reRender="table"/>
"Without refreshing the page" means AJAX.
RichFaces 3.3 has AJAX support, and their documentation explains how to use it in chapters 5.1 through 5.7.