Loading/Wait screen using jQuery UI Block-Part 1(Blocking Full Page)

Saturday, June 9, 2012

[Update : Added Live Demo Links]

Ever wondered how to show user a wait or loading message while a ajax call from a visualforce page is in progress?
Well the answer is yes! You can always show a message to user using action status.
What if you want to block the page or some predefined area? Well the solution is jQuery UI block. Using this plugin you can actually block portions of visualforce page while the ajax action is processing.Well the part 1 I am demonstrating how to block the full page while a ajax request is in progress.

How it works?

Very simple from <apex:commandButton/> or <apex:actionFunction/> simply relate a <apex:actionstatus/> component which has a "onstart" and "onstop" event. Call the "blockPage" js function from the "onstart" and call "unblockPage" function from "onstop" attribute.

How the Page will look like?

Visualforce Page

<apex:page controller="jQueryUIBlockDemo_Con">  
   <!-- Import Necessary Jquery js File and StyleSheets-->  
   <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-1.6.2.min.js')}"/>  
   <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.16.custom.min.js')}"/>  
   <apex:includeScript value="{!URLFOR($Resource.jqPlugin, '/jquery.blockUI.js')}"/>  
   <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/>  
   <script>  
     $j = jQuery.noConflict();  
     //function to block the whole page  
     function blockPage(){   
       $j.blockUI({ message: '<img src="/img/loading32.gif" /><h1> Loading...</h1>',   
         css: {   
          border: 'none',   
          padding: '15px',   
          '-webkit-border-radius': '10px',   
          '-moz-border-radius': '10px',   
          opacity: .9  
         }   
       });   
       return false;  
     }  
     //function to unblock the page  
     function unblockPage(){  
       $j.unblockUI();  
     }  
   </script>  
   <apex:form >  
     <apex:sectionHeader title="Jquery UI Block Demo" subtitle="This is a demo of jQuery UI block for Blocking the whole page when a ajax request is in progress!"/>  
     <!--In the on start event of action status just call the blockPage method and onstop call the unblockPage js method-->  
     <!--Calling the blockPage js function blocks the page until unblockPage method is called-->  
     <apex:actionStatus onstart="blockPage()" onstop="unblockPage()" id="blockUI"/>  
     <apex:pageBlock title="Jquery UI Block Demo">  
       <p>Press the send request button to send a ajax request to the controller/server.</p>  
       <apex:pageBlockButtons id="pb">  
         <!--Note here in the status attribute of command button the id of action status is provided-->  
         <apex:commandButton value="Send Request" action="{!processAjaxRequest}" reRender="pb" status="blockUI"/>  
       </apex:pageBlockButtons>  
     </apex:pageBlock>  
   </apex:form>  
 </apex:page>  

Apex Controller

 public class jQueryUIBlockDemo_Con{  
   public void processAjaxRequest(){  
     //Do some processing here  
     for(Integer i =0 ; i < 10000; i++){  
     }  
   }  
   //test method  
   static testMethod void test_ProcessAjaxRequest(){  
     new jQueryUIBlockDemo_Con().processAjaxRequest();  
   }  
 }  

Demo
You can check the live demo from http://blogforce9dev-developer-edition.ap1.force.com/jQueryUIBlockDemo

Need more help to implement?

Don't worry packaged a demo visualforce page and all the necessary static resources like jQuery files, jQuery UI Block Plugin. Install the demo page from the the Project Detail Page http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rfwI and go to "jQueryUIBlockDemo". The code is well commented and ready to use.