Question

with asp.net code below my ajax_loader image doesn’t work well and always shown ..

 <asp:ScriptManager ID="MainScriptManager" runat="server" />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label runat="server" ID="lblname">
                        Name</asp:Label><br />
                    <asp:TextBox runat="server" ID="txbname"></asp:TextBox><br />
                    <asp:Label ID="lblemail" runat="server">
                        Email</asp:Label><br />
                    <asp:TextBox runat="server" ID="txbemail" /><br />
                    <asp:Label runat="server" ID="lblsugg">
                        Suggestion</asp:Label><br />
                    <asp:TextBox runat="server" Rows="3" Columns="20" ID="txbsugg" TextMode="MultiLine"></asp:TextBox>
                    <asp:Button runat="server" ID="btnsubmit" OnClick="btnsubmit_onclick" Text="submit" />
                    <asp:Label runat="server" ID="lblresultmsg"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>

            <div id="loading">
                <p>
                    <img src="Images/ajax-loader.gif" />
                    Please Wait</p>
            </div>

and jquery code

    $("#loading").ajaxStart(function() {
        $(this).show();
    }).ajaxStop(function() {
        $(this).hide();
    });

any suggestions !?

Answer 1

You could create a generic way to handle this by adding the following code to a common js include. Here’s a quick and dirty example:

Note: Be sure you initialize it by calling SetupGlobalAjaxHandlers on your page load.

function SetupGlobalAjaxHandlers()
{
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_initializeRequest(InitializeRequest); 
    prm.add_endRequest(EndRequest);
}

function InitializeRequest(sender, args) 
{ 
    if(typeof(OnPageInitRequest) != "undefined")
        OnPageInitRequest();
} 

function EndRequest(sender, args) 
{ 
    if(typeof(OnPageEndRequest) != "undefined")
        OnPageEndRequest();
} 

Then, in any page that includes the js file, you could optionally implement the OnPageInitiRequest() and OnPageEndRequest() methods. There, you could show/hide your loading indicator.

I do recommend, though, that you use an UpdateProgress control as you get the show/hide logic for free.

This technique opens up some possibilities for you, say, if you wanted to disable controls while a partial postback is occurring.