Detect end of ajax request from asp by javascript

Question

If the user click on an input-tag (type="radio"), I load new data from the database. Because it can spend a time, I show a loading animation. After it must the animation be undisplayed.

Now is my question: how can I detect if your ajax request from an aspx page has been finished by javascript code for undisplaying the animation? If no, are there other ways to get the same result?

Update 1: I use only this lines of code:

<asp:ScriptManager EnablePartialRendering="true"  runat="server" />

<asp:UpdatePanel ID="updPnlCategorieen" UpdateMode="Always" runat="server">
    <ContentTemplate>

        <asp:Panel ID="pnlHoofdTopics" CssClass="topics" runat="server" />
        <asp:Panel ID="pnlCategorien" CssClass="topics" runat="server" />
        <asp:Panel ID="pnlItems" CssClass="topics" runat="server" />

        <asp:Panel cssclass="loading" ID="pnlLaden" runat="server">
            <div class="circle"></div>
            <div class="circle1"></div>
        </asp:Panel>

    </ContentTemplate>
</asp:UpdatePanel>

And place the triggers by code behind (C#):

updCategorieen.Triggers.Add(new AsyncPostBackTrigger() {
    ControlID = rbtCat.ID,
    EventName = "CheckedChanged"
});

For show the loading animation I use javascript. The code below:

var topic = []; //--> location for all the radio buttons
var laden; //--> location for loading div

document.addEventListener("DOMContentLoaded", function () {
    init();
});

function init() {

    laden = document.getElementsByClassName("loading")[0];
    topic = document.getElementsByClassName("topic");

    laden.style.display = "none";

    for (i = 0; i < topic.length; i++) {

        topic[i].addEventListener("click", function () {
            startLaden();
        });
    }

    geladen.addEventListener("change", function () {
        stopLaden();
    });
}

function startLaden() {

    laden.style.display = "block";
}

function stopLaden() {

    laden.style.display = "none";

    topic = document.getElementsByClassName("topic");
}

Update 2: I've also try to remove it on server side after loading all topics.

pnlLaden.Style["display"] = "none";

That works, but if I'll show it again, the loading animations don't come back. So, I do this on the begin.

pnlLaden.Style["display"] = "block";

But has no effect...

I've also tried some thing found on internet but doesn't work like live, on etc. but nothing works.

Can anyone help me, I'm new with ajax and Asp.net?
Thanks and sorry for my poor english.

This has been answered hundreds of times, here's one -> http://stackoverflow.com/questions/8761713/jquery-ajax-loading-image — adeneo, Aug 15 '15 at 17:58
Have you tried the ASP.NET AJAX Control toolkit's `UpdateProgress` control? Documentation located [here](https://msdn.microsoft.com/en-us/library/bb398821.aspx). — Karl Anderson, Aug 16 '15 at 13:43
how about using jquery's [$.ajax](https://api.jquery.com/jQuery.ajax/) and its powerful ajax handlers. [$.ajaxStop](https://api.jquery.com/ajaxStop/) might be helpful. — Rohit416, Aug 16 '15 at 13:48

score 1 · Accepted Answer · edited Aug 16 '15 at 15:07

@ Karl Anderson suggested me a to use an asp:UpdateProgress and it works. My code is now this:

<%-- my asp:UpdatePanel--%>

<asp:UpdateProgress ID="updPrgLadenTopics" AssociatedUpdatePanelID="updPnlCategorieen" 
                    runat="server">
    <ProgressTemplate>
        <asp:Panel CssClass="loading" ID="pnlLaden" runat="server">
            <div class="circle"></div>
            <div class="circle1"></div>
        </asp:Panel>
    </ProgressTemplate>
</asp:UpdateProgress>

Detect end of ajax request from asp by javascript

1 Answers1