Play Games

Search This Blog

Tuesday, November 3, 2015

Disable entire visualforce page while saving data(or) Display "loading image" in visualforce page

Visualforce Page:
<apex:page standardController="Account">
<style>
    #loading-curtain-div {
    height:0px;
    width:100%;
    position:absolute;
    z-index:5;
    //-webkit-transition: all 0.30s ease-out;
    //-moz-transition: all 0.30s ease-out;
    }
   
    /* This is for the full screen DIV */
    .popupBackground {
    /* Background color */
    background-color:black;
    opacity: 0.20;
    filter: alpha(opacity = 20);
   
    /* Dimensions */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 998;
    position: absolute;
   
    /* Mouse */
    cursor:wait;
    }
   
    /* This is for the message DIV */
    .PopupPanel {
    /* Background color */
    border: solid 1px #e3deb8;
    background-color: #ECECEC;
   
    /* Dimensions */
    left: 50%;
    width: 300px;
    margin-left: -100px;
    top: 50%;
    height: 50px;
    margin-top: -25px;
    z-index: 999;
    position: fixed;
   
    /* Mouse */
    cursor:pointer;
    }
</style>

<apex:actionStatus id="statusSave" stopText="">
    <apex:facet name="start">
        <div>
            <div class="popupBackground" />
            <div class="PopupPanel">
                <table  width="100%" height="100%">
                    <tr>
                        <td align="center"><b>Please Wait</b></td>
                    </tr>
                    <tr>
                        <td align="center"><img src="/img/loading24.gif"/></td>
                    </tr>
                </table>
            </div>
        </div>
    </apex:facet>
</apex:actionStatus>
<apex:form>
    <apex:pageBlock title="Account" mode="edit" id="pb">
        <apex:pageBlockButtons>
            <apex:commandButton action="{!save}" value="Save" status="statusSave" rerender="pb">
                <apex:actionStatus id="actStatusId">
                    <apex:facet name="start">
                        <img src="/img/loading.gif" />
                    </apex:facet>
                </apex:actionStatus>
        </apex:commandButton>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Account Section" columns="2">
            <apex:inputField value="{!account.name}"/>
            <apex:inputField value="{!account.site}"/>
            <apex:inputField value="{!account.type}"/>
            <apex:inputField value="{!account.accountNumber}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>
Output:
Before clicking save

After Clicking Save