CODEWITHSUNDEEP
javascriptc#asp.netajaxasp.net-ajax
H. Pauwelyn
H. Pauwelyn

Reputation: 14280

Detect end of ajax request from asp by javascript

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.

Upvotes: 2

Views: 194

Answers (1)

H. Pauwelyn
H. Pauwelyn

Reputation: 14280

@ 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>

Upvotes: 1

Related Questions