why ajax loader image always shown using jquery and asp.net

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 !?

Why not use the UpdateProgress control? It does all of that automatically. See: Introduction to the UpdateProgress Control — Jeremy
– Jeremy, Commented May 10, 2012 at 16:35

gdoron · Accepted Answer · 2012-05-10 16:34:26Z

2

ajaxStart and ajaxStop works only for ajax request sent by jQuery, if you use other libraries or UpdatePanel, it won't help you.
jQuery only.

Whenever an Ajax request is about to be sent {With jQuery-gdoron}, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

Example of jQuery ajax request that will fire the ajaxStart and ajaxStop:

$.ajax({
        url: 'foo',
        ...
        ...
    });

answered May 10, 2012 at 16:34

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy · Accepted Answer · 2012-05-10 16:53:27Z

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.

Collectives™ on Stack Overflow

why ajax loader image always shown using jquery and asp.net

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related