ajax "loading" icon with UpdatePanel postbacks

Question

I have a form that is being dynamically built depending on user selection using Ajax (built in .NET Ajax with UpdatePanel).

how can I insert a "standard" ajax loading icon (maybe have it attached to the mouse pointer) while the postback is happening then remove it when the post back is finished?

I do have the AjaxToolKit installed if that helps.

Pranay Rana · Accepted Answer · 2010-05-11T19:14:54.363

use updateprogress of tool kit :hope this will help you

<asp:updatepanel id="ResultsUpdatePanel" runat="server">    
<contenttemplate>

<div style="text-align:center;">
    <asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="ResultsUpdatePanel" dynamiclayout="true">
                        <progresstemplate>

                           <img src="support/images/loading.gif">

                        </progresstemplate>
                    </asp:updateprogress>

                    </div>

 //your control code
</contenttemplate>
</asp:updatepanel>

score 4 · Answer 2 · edited Mar 14 '23 at 23:04

I found some JavaScript in this article, 3 Different Ways to Display Progress in an ASP.NET AJAX Application by Suprotim Agarwal to make update process yourself and also you can put it anywhere in page and it work any update panel in page .

    <script type="text/javascript">
                 // Get the instance of PageRequestManager.
                 var prm = Sys.WebForms.PageRequestManager.getInstance();
                 // Add initializeRequest and endRequest
                 prm.add_initializeRequest(prm_InitializeRequest);
                 prm.add_endRequest(prm_EndRequest);
                
                 // Called when async postback begins
                 function prm_InitializeRequest(sender, args) {
                     // get the divImage and set it to visible
                     var panelProg = $get('divImage');                
                     panelProg.style.display = '';
                     // reset label text
                     var lbl = $get('<%= this.lblText.ClientID %>');
                     lbl.innerHTML = '';
     
                     // Disable button that caused a postback
                     $get(args._postBackElement.id).disabled = true;
                 }
     
                 // Called when async postback ends
                 function prm_EndRequest(sender, args) {
                     // get the divImage and hide it again
                         $('divImage').hide();                
                      // Enable button that caused a postback
                     $get(sender._postBackSettings.sourceElement.id).disabled = false;
                 }
             </script>

After some limited testing I found there to be a slight delay in the dynamic addition of DOM elements when using the framework's `` control. Contrarily this method of hooking up the relevant JS events gave instant UI feedback. — Red Taz, Oct 05 '12 at 07:33
yes its a faster but little bit but if you have a heavy page with lots of dom you can differentiate speeds of both — Anant Dabhi, Oct 05 '12 at 11:16

score 1 · Answer 3 · answered Sep 22 '15 at 17:25

<asp:UpdateProgress ID="updateProgress" runat="server">
            <ProgressTemplate>
                <div class="loading-panel">
                    <div class="loading-container">
                        <img src="<%= this.ResolveUrl("~/images/gears.gif")%>" />
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <style>
            .loading-panel {
                background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
                position: relative;
                width: 100%;
            }

            .loading-container {
                background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0;
                color: #fff;
                font-size: 90px;
                height: 100%;
                left: 0;
                padding-top: 15%;
                position: fixed;
                text-align: center;
                top: 0;
                width: 100%;
                z-index: 999999;
            }
        </style>

Loading images from:http://loading.io/

ajax "loading" icon with UpdatePanel postbacks

3 Answers3

Linked

Related