command button doesn't work in p:tabView - jsf

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

JSF button to dynamically add row to table also inserts extra table

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

Update list size in real time with PF Poll

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.

selectBooleanCheckBox does not work seperatly in p:dialog

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!

my commandbutton doesnt work, JSF + primefaces?

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>

Update JSF datatable without refreshing the page

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.

Resources