Salesforce | Show Loading on AJAX request and disappear after completing its progress.

|
| By Webner

Solution : In many scenarios, apex button click sends an AJAX request (for e.g. to render a part of Visualforce page after completing its progress). Sometimes the AJAX request takes so much time.

To cope with this issue we have to show loading or waiting message to the user as their request is in progress and after completing the progress loading or waiting message should disappear.

Suppose we have a button labeled “Save”. On click of “Save” button, request will go to controller method. To achieve showing loading image we used a GIF image using actionstatus component. We used apex:facet tag inside actionstatus to show image and we have specified name value as ‘start’ in apex:facet tag. So it will show an image when request is in progress. We can also use ‘stop’ value in the name attribute of apex:facet to specify message when the request completes.

Code :

<apex:actionstatus id="loading">
     <apex:facet name="start">
       <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb; height:100%;opacity:0.65;width:100%;">            
          <div class="waitingHolder" style="top: 100px; width: 91px;">
             <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
             <span class="waitingDescription">Loading...</span>
          </div>
       </div>
     </apex:facet>
</apex:actionstatus>

Use status property in with apex:commandButton

<apex:commandButton value="Show Loading" rerender="details" status="loading"/>

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Salesforce customization, App development or any other software development assistance please contact us at salesforce@webners.com

Leave a Reply

Your email address will not be published. Required fields are marked *