Animated Apex Command Button For Ajax Request

Have you ever noticed the Salesforce "Quick Save" button?? The button actually gets disabled while the class or the page is being saved. Hey Isn't that cool? Well this is not anymore Salesforce secret!. We can implement this in any visualforce page very easily without any JavaScript and HTML. Here we go 






<apex:page >  
   <apex:form >  
     <apex:pageBlock title="Animated Ajax Button">  
       <apex:outputPanel layout="block" style="text-align:center">  
         <apex:actionStatus id="myStatus">  
           <apex:facet name="start">  
             <apex:outputPanel >  
               <apex:commandButton value="Saving..." style="width:120px" disabled="true"/>  
               <apex:image value="/img/loading24.gif"/>  
             </apex:outputPanel>  
           </apex:facet>  
           <apex:facet name="stop">  
             <apex:outputPanel >  
               <apex:commandButton value="Save" action="{!save}" style="width:120px" reRender="myStatus" status="myStatus"/>  
             </apex:outputPanel>  
           </apex:facet>  
         </apex:actionStatus>  
       </apex:outputPanel>  
     </apex:pageBlock>  
   </apex:form>  
 </apex:page>  

2 comments: