Tuesday, October 27, 2009

Displaying please wait ajax animation on Visualforce page

Many times there comes a need to display a please wait icon while doing a ajax call on a VF page. This also looks cool for UI.

The beauty of VF page is, large things can be achieved with small efforts. Here is a three line of code that will help you achieve the flower.

<script>
        // To show / hide waiting-flower icons
        function setVisibility(id, isVisible){
            document.getElementById(id).style.visibility= isVisible ? 'visible' :  'hidden';
           
        }
       
        function show(id){setVisibility(id,true);}
        function hide(id){setVisibility(id,false);}
     
</script>

<apex:actionstatus id="pleasewait" onstart="show('img_status_product_select');" onstop="hide('img_status_product_select');">        
<img height="20px" id="img_status_product_select" src="%7B%21$Resource.AjaxAnimation%7D" tyle="visibility:hidden" width="20px" />

</apex:actionstatus>


Thats all for today,
Cheerio.