+ Start a Discussion
Namina P VNamina P V 

Display some message on the page while something is loading

Hi,
I have a Page and a controller.

In my page I am doing something like, when we select a radio button only some portion of the page will get rendered=true.
But when I click radio button it takes some time to load. So I would like to display some message like "loading" on the page, while it is loading.
Can anyone plz help me with the code?

Thanks in advance

Best Answer chosen by Namina P V
Manohar kumarManohar kumar

Hi Navina,

upload a processing image in sataic resource and then use it in this code.please paste this code after form in your page.And put  status="statusSplash" when submitting from.like <apex:commandButton action="someMethod" status="statusSplash"/>

<script type="text/javascript">
        function startSplash() {
        var divObj = document.getElementById('splashDiv');
        var msgSplash =document.getElementById('waitMsg');
        var browserName = navigator.appName;
            if(browserName == 'Netscape'){
                divObj.style.display='table-cell'; 
            } 
            else {
                divObj.style.display='table-cell';  
            }
        }
        
        function endSplash() {            
            document.getElementById('splashDiv').style.display='none';
        }
        
    </script>

<div id="splashDiv" style="display: none;width:100%;height:100%;background-color: #000;z-index: 1; position: absolute;opacity:0.5;">
        <div style="text-align: center; top: 40%;width:100%;height:100%;position: fixed;" class="circle"><apex:image value="{!$Resource.LoadingImage}"></apex:image></div>
        </div>
        <apex:actionStatus id="statusSplash" onstart="startSplash();" onstop="endSplash();"/>

 

Please let me know if its helps or if you need something else.

Thanks,

Manohar

All Answers

Dileep KumarDileep Kumar

Hi Namina,

Can you please post vf page and controller code here ?

Thanks,

Dileep

Manohar kumarManohar kumar

Hi Navina,

pls share some of your code.Are you are using an Image while loading.??

Thanks,

Manohar

Namina P VNamina P V

Hi,
Thanks for your response,. Actually its a long code.
I can tell you, the area in which I need help.

VF:
 <apex:selectRadio value="{!Eye}">
                <apex:selectOptions value="{!items}" />
                <apex:actionSupport event="onchange" action="{!displayPage}" reRender="eyepanel"/>
</apex:selectRadio>
<apex:outputPanel rendered="{!displyItem}">

</apex:outputPanel>

controller:
displayPage{
        String displayItem = true;

}

this code snippet working fine, but it takes some time to display the outputpanel content in the page.
During that time I need to display the message like "please wait.... loading" like that.
Hope this is clear.

 

Manohar kumarManohar kumar

Hi Navina,

upload a processing image in sataic resource and then use it in this code.please paste this code after form in your page.And put  status="statusSplash" when submitting from.like <apex:commandButton action="someMethod" status="statusSplash"/>

<script type="text/javascript">
        function startSplash() {
        var divObj = document.getElementById('splashDiv');
        var msgSplash =document.getElementById('waitMsg');
        var browserName = navigator.appName;
            if(browserName == 'Netscape'){
                divObj.style.display='table-cell'; 
            } 
            else {
                divObj.style.display='table-cell';  
            }
        }
        
        function endSplash() {            
            document.getElementById('splashDiv').style.display='none';
        }
        
    </script>

<div id="splashDiv" style="display: none;width:100%;height:100%;background-color: #000;z-index: 1; position: absolute;opacity:0.5;">
        <div style="text-align: center; top: 40%;width:100%;height:100%;position: fixed;" class="circle"><apex:image value="{!$Resource.LoadingImage}"></apex:image></div>
        </div>
        <apex:actionStatus id="statusSplash" onstart="startSplash();" onstop="endSplash();"/>

 

Please let me know if its helps or if you need something else.

Thanks,

Manohar

This was selected as the best answer