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';
   }
});

score 2 · Answer 1 · answered Sep 03 '13 at 12:57

2

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';
});

answered Sep 03 '13 at 12:57

Arun P Johny

365,836
60
503
504

1

@Gowtham yes... but if you want to show the loading message for all ajax requests from every part of the code then see tea2code's answer – Arun P Johny Sep 03 '13 at 13:00

score 2 · Answer 2 · answered Sep 03 '13 at 12:59

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...
});

adeneo · Accepted Answer · 2013-09-03T15:03:55.670

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 = '/';
    }
});

score 1 · Answer 4 · edited May 23 '17 at 12:23

1

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

edited May 23 '17 at 12:23

Community

1
1

answered Sep 03 '13 at 12:59

tea2code

937
1
7
15

score 0 · Answer 5 · answered Sep 03 '13 at 13:02

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.

score 0 · Answer 6 · answered Sep 03 '13 at 13:04

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"); });

Calling a function until jQuery .post finishes loading

6 Answers6