Click here to Skip to main content
15,886,919 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
Hello All,
I want to show a loading image on button click,and disable all the controls on page as soon as processing is complete image should be invisible.
I am calling another application on button click, so it is taking time to complete.

please provide me the solution in any javascript,ajax,jquery.
Posted
Updated 22-May-12 22:10pm
v2

Use progress bar Control from Asp.Net Ajax.

Hope this will Help:

http://docs.jquery.com/UI/Progressbar[^]
 
Share this answer
 
in this code we create a div on whole page with disable mode than whole page become disable and in this div we set a image like progress bar or please wait type. i hope it will fulfill your requirement.

XML
<asp:ScriptManager ID="ScriptManager1" AsyncPostBackTimeout="3600" runat="server">
            </asp:ScriptManager>
            <script type="text/javascript" language="javascript">
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                prm.add_pageLoaded(pageLoaded);
                prm.add_initializeRequest(initializeRequest);
                prm.add_endRequest(endRequest);
                function initializeRequest(sender, eventArgs)
                {
                    EnableDisablePage(1);
                }
                function pageLoaded(sender, eventArgs)
                {
                }

                function endRequest(sender, endRequestEventArgs)
                {
                    EnableDisablePage(2);
                }
            </script>


now in js file add following java scripts

C#
function CreateDivSections()
{
    var myWidth = document.body.clientWidth;
    var myHeight = document.body.clientHeight;

    var dvDisable = document.createElement('div');
    dvDisable.id = 'dvDisable';
    dvDisable.className = 'clsDisablePage';
    document.body.appendChild(dvDisable);
    dvDisable.style.width = myWidth+15;
    dvDisable.style.height = myHeight+20;

    var dvLayer = document.createElement('div');
    dvLayer.id = 'dvLayer';
    dvLayer.className = 'clsWaitPage';
    document.body.appendChild(dvLayer);
    dvLayer.style.left = (myWidth - dvLayer.style.width) / 2 ;
    dvLayer.style.top = (myHeight - dvLayer.style.height) / 2 ;
}
function EnableDisablePage(EnableDisableFlag)
{
    CreateDivSections();
    document.getElementById('dvDisable').style.visibility = (EnableDisableFlag==1) ? 'visible' : 'hidden';
    document.getElementById('dvLayer').style.visibility = (EnableDisableFlag==1) ? 'visible' : 'hidden';
}


in css file add this code

CSS
.clsWaitPage
{
    visibility:hidden;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    font-family: Book Antiqua;
    font-weight:bold;
    font-size: 12pt;
    padding-left: 0px;
    padding-right: 0px;
    z-index: 1002;
    background: white;
    background-image:url(images/wait.gif);
    overflow: hidden;
    position: absolute;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    height: 100px;
    width: 100px;
}


in your project add folder images and add image which you want to display. i use wait.gif file.
 
Share this answer
 
Comments
HexVijay 23-May-12 8:23am    
Thanks..!! It works fine for me...
sagar wasule 20-Dec-12 2:25am    
Hi, I'm working on MVC application , hence I dnt have script mananger ... how can I go abt this ???
harishgajawada 24-Mar-14 5:55am    
Hi, how do i call this function initializeRequest(sender, eventArgs)? is it onclientclick?
please advice.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900