Calling a function until jQuery .post finishes loading

Question

I'm a little new to jQuery framework and while using AJAX with normal javascript I used readyState() function to display a loading gif image. But, I don't know how to use that in jQuery .post() method. Was it possible to add a class until it finishes loading? If so, please give a code sample. My function is similar to this:

$.post("verify.php",{
username: u,
password: p
},function(r) {
   if(r == 1) {
     $(".elmt").addClass("loading");
   } else if (r == 0) {
     location.href = 'http://localhost';
   }
});

Answer 1

Just call the addClass before the $.post() and be done with it

$(".elmt").addClass("loading");
$.post("verify.php", {
    username: u,
    password: p
}, function (r) {
    location.href = 'http://localhost';
});

Answer 2

You could fire a custom event before starting your AJAX request. Then in your success function, fire another to stop.

Or if you just want the loading animation:

$(".elmt").addClass("loading");

$.post("verify.php",{
username: u,
password: p
},function(r) {       
     $(".elmt").removeClass("loading");
     // etc...
});

Answer 3

I always prefer using $.ajax for things like this as it has more options than the shortcuts :

$.ajax({
    type: 'POST',
    url : 'verify.php',
    data: {
           username: u,
           password: p
    },
    beforeSend: function () {
        $(".elmt").addClass("loading"); // add loader
    }
}).always(function() { // always executed

    $(".elmt").removeClass("loading"); // remove loader

}).done(function(r) { // executed only if successful
    if (r == 0) {
        location.href = '/';
    }
});

Answer 4

There is a global way to do this using ajaxStart() and ajaxStop(). See How to show loading spinner in jQuery?

Answer 5

If you need to do for all your requests. You could try:

$(document).ajaxStart(function(){
   $(".elmt").addClass("loading");
});

$(document).ajaxStop(function(){
  $(".elmt").removeClass("loading");
});

But it's not so cool to always display the loading when the request takes little time as it will cause the screen flicking. Try:

var timer;
$(document).ajaxStart(function(){
       timer = setTimeout(function(){
          $(".elmt").addClass("loading");
       },1500);
    });

    $(document).ajaxStop(function(){
      clearTimeout(timer);
      $(".elmt").removeClass("loading");
    });

By adding a timer, only requests that take longer than 1.5 seconds should be considered long and display a loading icon.

Answer 6

As you see on code below you can do your work on different results of post method

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post("example.php", function() {
alert("success");
})
.done(function() { alert("second success"); })
.fail(function() { alert("error"); })
.always(function() { alert("finished"); });
// perform other work here ...
// Set another completion function for the request above
jqxhr.always(function(){ alert("second finished"); });