show loading status with ajax call

Question

I'm looking for a JavaScript solution to show some sort of status while an ajax request is taking place. I tried document.getElementById("status").innerHTML = "<h2>Loading....</h2>"; but that didn't work. Any ideas?

function codesDelete(id) {
    var ajax;
    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    } else {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    ajax.onreadystatechange = function() {
        if (ajax.readyState === 4 && ajax.status === 200) {
            document.getElementById("status").innerHTML = "<h2>Data Deleted!</h2>";
        }
    }

    // this is what i tried
    document.getElementById("status").innerHTML = "<h2>Loading....</h2>";


    ajax.open("GET", "code.php?id=" + id, true);
    ajax.send();

    setTimeout(function() {
        document.getElementById("status").style.display = "none";
    }, 3000);
}

Yatrix · Accepted Answer · 2012-09-18 21:14:39Z

1

You can use JQuery's when/done. Start your status indicator and then use when/done like this:

// start the status indicator wherever it's appropriate    
StartStatusIndicator();

//Make your ajax call
$.when($.ajax({
    type: "POST",
    ...more stuff...
    success: function (json) {
        ...even more stuff...
    }
})).done(function () {
    KillYourStatusIndicator();
});

The code inside done gets fired when the ajax call is finished.

answered Sep 18, 2012 at 21:14

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

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

2 Comments

Yatrix Over a year ago

Just learned this myself a couple months ago. Thought it was pretty cool. =)

Paul Richter Over a year ago

Yeah, for sure. I like that it is generic enough that you can pretty well use it anywhere, for pretty well any thing.

Paul Richter · Accepted Answer · 2012-09-18 21:31:58Z

1

Another method you could do is to use the beforeSend and complete callbacks on jQuery.ajax, like so:

$.ajax({
    beforeSend:function(){
        // Create and insert your loading message here as you desire
        // For example, a version of what you were trying to do would be:
        $("#status").html("<h2>Loading....</h2>");
    },
    // ... whatever other things you need, such as a success callback, data, url, etc
    complete: function(){
       // Remove your loading message here, for example:
       $("#status").html("");
    }
});

As the names suggest, beforeSend will be executed before the AJAX call is made. Complete will execute, regardless whether the AJAX succeeded or failed, after the call is finished.

edited Sep 18, 2012 at 21:31

answered Sep 18, 2012 at 21:26

Paul Richter

11.1k10 gold badges56 silver badges89 bronze badges

Collectives™ on Stack Overflow

show loading status with ajax call

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related