How to dynamically disable/enable commandbutton in datatable in JSF/PrimeFaces - jsf

Question

I am displaying list of some objects in primefaces datatable. Apart from object related columns, I have added two columns that contain commandbutton. Each of these commandbutton make ajax calls to desired methods in bean. I want to disable both commandbuttons in that row when any of the button is clicked and enable them again once action is completed successfully. The method execution is simulated by ajaxStatus which is working fine.
Following is selected code of xhtml
<h:form id="form1" >
<p:remoteCommand name="onload" action="#{controlBean.init}" autoRun="true" />
<h:outputtext>Sample Project</h:outputtext>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="prestart">
<h:outputText value="Starting..." /> </f:facet>
<f:facet name="error"> <h:outputText value="Error" />
</f:facet>
<f:facet name="success"> <h:outputText value="Success" />
</f:facet>
<f:facet name="default"> <h:outputText value="Idle" />
</f:facet>
<f:facet name="start"> <h:outputText value="Please Wait" />
<p:graphicImage name="/images/ajaxloadingbar.gif" />
</f:facet>
</p:ajaxStatus>
<p:dataTable var="appl" id="tbl1" rowIndexVar="rowIndx" value="#{controlBean.applsList}">
<p:column headerText="Name">
<h:outputText value="#{appl.applName}" />
</p:column>
<p:column headerText="Type">
<h:outputText value="#{appl.applType}" />
</p:column>
<p:column headerText="Desc" rendered="true">
<h:outputText value="#{appl.applDesc}" />
</p:column>
<p:column headerText="Start Appl" id="col4">
<p:commandButton value="Submit" ajax="true"
process="#this"
widgetVar="startButtonVar"
id="startBtn" update="msgs, col4, startBtn"
action="#{controlBean.startAction}" style="margin-right:20px;"
styleClass="ui-priority-primary"
disabled="#{controlBean.startBtnDisabled}">
<f:setPropertyActionListener value="#{appl}" target="#{controlBean.selectedAppl}"/>
</p:commandButton>
</p:column>
<p:column headerText="Stop Appl" id="col5">
<p:commandButton value="Submit" ajax="true"
process="#this"
widgetVar="stopButtonVar"
id="stopBtn" update="msgs, col5"
action="#{controlBean.stopAction}" style="margin-right:20px;"
styleClass="ui-priority-primary"
disabled="#{controlBean.btnDisabled}">
<f:setPropertyActionListener value="#{appl}" target="#{controlBean.selectedAppl}"/>
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
backing bean methods are as under:
public void startAction()
{
System.out.println("In start action method");
this.btnDisabled = true;
for(int i=0;i<100000;i++)
{
if(i%10000 == 0)
{
System.out.println(i);
}
for(int j=0;j<10000;j++)
{
for(int k=0;k<1000;k++)
{
}
}
}
MessageUtils.info(getSelectedAppl().getApplName()+" has been started");
this.btnDisabled = false;
}
public void stopAction()
{
System.out.println("In stop action method");
this.btnDisabled = true;
for(int i=0;i<100000;i++)
{
if(i%10000 == 0)
{
System.out.println(i);
}
for(int j=0;j<10000;j++)
{
for(int k=0;k<1000;k++)
{
}
}
}
MessageUtils.info(getSelectedAppl().getApplName()+" has been stopped");
this.btnDisabled = false;
}
Everything is working fine except disabling/enabling of commandbuttons. Any help in this regard will be highly appreciated.
Regards

Answer 1

You could disable them on the onclick javascript handler:
<p:commandButton id="startBtn"
widgetVar="startButtonVar"
onclick="PF('startButtonVar').disable();"
.....
The onclick will be executed BEFORE the AJAX call. On return, as the button is updated, it will be reenabled.