Loading/Wait screen using jQuery UI Block-Part 2(Element Blocking)

Wednesday, June 13, 2012

[Update : Added Live Demo Links]

In the first part I already described you how to create your own wait/loading screen by blocking the full page.(In case you have missed the first part, you can quickly catch up by reading this blog )

Well what if you want to block specific part of the page ?? Like a pageblock or certain set of fields?? Well jQuery is again here to rescue! The good part of jQuery is it mixes with visualforce very readily to give out awesome results!

So lets see how to make this work using the good old jQuery UI Block Plugin.


 How to block a certain portion of page?

 For demo let us assume that we want to block a pageblock while a ajax request is in progress. To achieve this just give page block a unique id say "pb2Block" and use the same from the jquery ui block. Pass in the id of the pageblock which you want to block to the function, probably from a <apex:actionStatus> like this

Action Status

<apex:actionStatus onstart="blockElement('pb2Block')" onstop="unblockElement('pb2Block')" id="blockElement"/>

Command Button

<apex:commandButton value="Send Request" action="{!processAjaxRequest}" reRender="pb" status="blockElement"/>  

so whenever a ajax request is invoked by a command button the onstart event of the actionStatus is fired which blocks the the pageblock with id "pb2Block" and when the ajax request ends the ontstop event is fired which unblocks the pageblock.


 The JavaScript Functions : The demo visualforce page includes two Javascript function to block and unblock the element

              a) blockElement - takes the Salesforce id of the component to block.
              b)unblockElement - takes the Salesforce id of the component to unblock.



How the Page will look like?

Where is the Code?

Visualforce Page

 <apex:page controller="jQueryUIElementBlockDemo_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();  
     /*  
     *Pass the Id of the element to block   
     **/  
     function blockElement(sfId){   
       $j('[id$='+sfId+']').block({ 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;  
     }  
     /*  
     *Pass the Id of the element to unblock   
     **/  
     function unblockElement(sfId){  
       $j('[id$='+sfId+']').unblock();  
     }  
   </script>  
   <apex:form >  
     <!--In the on start event of action status just call the blockPage method and onstop call the unblockPage js method-->  
     <!--Calling the blockElement js function blocks the page until unblockElement method is called-->  
     <!--Please note that the "Id" of element to black is passed to the js functions--->  
     <apex:actionStatus onstart="blockElement('pb2Block')" onstop="unblockElement('pb2Block')" id="blockElement"/>  
     <apex:sectionHeader title="jQuery UI Element Block Demo" subtitle="This is a demo of jQuery UI block for Blocking Certain portion of a page."/>  
     <apex:pageBlock title="Block This Section" id="pb2Block">  
       <apex:pageBlockSection title="Press the send request button to send a ajax request to the controller/server." collapsible="false">  
         <apex:pageBlockSectionItem >      
           <apex:outputLabel >Name</apex:outputLabel>  
           <apex:inputText />   
         </apex:pageBlockSectionItem>  
         <apex:pageBlockSectionItem >      
           <apex:outputLabel >Phone</apex:outputLabel>  
           <apex:inputText />   
         </apex:pageBlockSectionItem>   
         <apex:pageBlockSectionItem >      
           <apex:outputLabel >Mobile</apex:outputLabel>  
           <apex:inputText />   
         </apex:pageBlockSectionItem>  
         <apex:pageBlockSectionItem >      
           <apex:outputLabel >Zipcode</apex:outputLabel>  
           <apex:inputText />   
         </apex:pageBlockSectionItem>     
       </apex:pageBlockSection>  
       <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="blockElement"/>  
       </apex:pageBlockButtons>  
     </apex:pageBlock>  
     <apex:pageBlock title="Unblocked Section">  
       <apex:pageBlockSection title="This Page block will remain unblocked" collapsible="false">  
         <apex:pageBlockSectionItem >      
           <apex:outputLabel >Name</apex:outputLabel>  
           <apex:inputText />   
         </apex:pageBlockSectionItem>  
         <apex:pageBlockSectionItem >      
           <apex:outputLabel >Phone</apex:outputLabel>  
           <apex:inputText />   
         </apex:pageBlockSectionItem>   
         <apex:pageBlockSectionItem >      
           <apex:outputLabel >Mobile</apex:outputLabel>  
           <apex:inputText />   
         </apex:pageBlockSectionItem>  
         <apex:pageBlockSectionItem >      
           <apex:outputLabel >Zipcode</apex:outputLabel>  
           <apex:inputText />   
         </apex:pageBlockSectionItem>     
       </apex:pageBlockSection>  
     </apex:pageBlock>  
   </apex:form>  
 </apex:page>  

Apex Controller

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

Demo

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

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 here http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rfwN