+ Start a Discussion
Saravanan @CreationSaravanan @Creation 

apex:facet for disabling the button

Hi All,

I have below code in my visualforce page

    <apex:pageBlockButtons >
        <apex:actionStatus id="saveXX">
          <apex:facet name="stop">
            <apex:commandButton action="{!saveEdit}" status="saveXX" rerender="error" value="Save"/>
          <apex:facet name="start">
            <apex:commandButton status="saveXX" value="Processing..." disabled="true"/>
when i click the save button which is in stop facet  it will display the process button which is in the stop facet.
The problem here is after clicking the save button saveEdit method is executing but this method is executing two times.

Please explain me how this work like this.And how do i stop it.

Thanks in advance

Hi ,

Try with below it will help 
<apex:pageBlockButtons >
	<apex:commandButton action="{!saveEdit}" status="saveXX" rerender="error" value="Save"/>
  <apex:actionStatus id="saveXX" startText="Processing..." stopText="DONE !!" />

Saravanan @CreationSaravanan @Creation
Thanks for the quick reply.

This will work but after clicking the Save it will show the Processing text but it also display the Save button .

I don't want to display the save button once its clicked.

Hi Saravanan,

I think you wnat to disable the button for usr for whcih user can not double click on the save button again .

if yes ,better you can use preloader in place of action status .

Saravanan @CreationSaravanan @Creation
Yes manoj you are correct.

Could you please explain me  what is preload and how to implement.

Mudasir WaniMudasir Wani

Change the page code as below
<apex:outputPanel id="panelId">
	<apex:pageBlockButtons >
		<apex:commandButton action="{!saveEdit}" status="saveXX" reRender="panelId" value="Save"/>
		<apex:commandButton status="saveXX" value="Processing..." disabled="true" rendered="{!showSaveButton}"/>
Controller should be having code like
public boolean showSaveButton{get;set;}
public pageReference saveEdit(){
	showSaveButton = false;
	PageReference pageRef = new PageReference('/apex/yourPageName/');
	//Make the setRedirect false
    return acctPage;
Let us know in case of any issue.

Don't forget to select best answer to make our efforts visible in the developer forum.
Please mark this as solution by selecting it as best answer if this solves your problem, So that if anyone has this issue this post can help
Hi Saravanan,

Please find below code an dtry to add with your code .
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<link rel="stylesheet" href="/resources/demos/style.css" />
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
		.popupBackground {background-color:#708090;opacity:1;filter:alpha(opacity=1);position:absolute;width:100%;margin-top:8px;height:100%;top:0;left:0;z-index:9998;}
       <apex:form > 
            <apex:outputPanel id="loader" style="display:none" >
                <apex:outputPanel styleClass="popupBackground" layout="block"  id="op" />
                    <apex:outputPanel styleClass="custPopup" layout="block" >
                        <div style="margin-left:120px">
                            <apex:image value="/img/loading32.gif" width="35px" />
			<apex:pageBlockButtons >
				<apex:commandButton action="{!saveEdit}" onclick="showLoader();"  rerender="error" value="Save" oncomplete="hideLoader();"/>
          function showLoader(){
          }function hideLoader(){

Try to down load the jqury API and add in static resource and try to use in code .
Down load from below link .


You need to add like below 

<script src="{!URLFOR($Resource.JQueryUI, '/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js')}"/>
 <script src="{!URLFOR($Resource.JQueryUI, '/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js')}"/>