3

I need to show a spinner with a message while a given AJAX request is going on and should stay there until the call finish. I don't care at all about the return status from the call since I will handle it later on (at the same code) so 404, 500, 200 or any other status is a valid one.

Currently this is how I am handling it:

$(document).bind("ajaxSend", function () {
    load_start('Please wait, we are processing data...');
}).bind("ajaxComplete", function () {
    load_end();
});

In the case above, for some reason (maybe because what's explained here about the difference between ajaxComplete vs ajaxStop - meaning ajaxComplete means the AJAX call was started successfully) the spinner stop before the call is finished because I am seeing it just running at Chrome Developer Toolbar.

The user then is trying to click the same button again because is not seeing anything on the page and ofc they won't go to the Dev Toolbar to see if the AJAX call still being executed or not.

I did in this way time ago:

$.ajax({
    ...
}).beforeSend(function () {
    load_start('Please wait, we are processing data...');
}).always(function(){
    load_end();
});

But I run into the same issues. What would be the right way to handle this? If there is any plugin out there and I need it feel free to recommend it.

ReynierPM
  • 17,594
  • 53
  • 193
  • 363

3 Answers3

3

update: using $.ajaxSetup https://jsfiddle.net/ewwink/vmm7Lqz8/

$.ajaxSetup({
  url: '/echo/html/',
  beforeSend: load_start,
  complete: load_end
});

you can do this, handleCallback will be called after request finished

$('#button').on('click', function() {
  load_start('Please wait, we are processing data...');
  $.ajax({
    ....
    error: handleCallback,
    success: handleCallback
  });

});

function handleCallback(response, status, jqxhr) {
  ...
  load_end();
}
ewwink
  • 18,382
  • 2
  • 44
  • 54
  • This is right I could use it but ... it should be for all the calls not only one, (see my comment above). Using this I will end up with a lot of custom callbacks – ReynierPM Jul 17 '17 at 13:57
3

If you want to do this for multiple AJAX requests without having to write the loading code in each request. You can do something as shown below.

 //This is called when the first AJAX request is fired.
    $(document).ajaxStart(function(event, jqXHR) {
        //Show spinner
    });

    //This is called after all the AJAX request are stopped.
    $(document).ajaxStop(function(event, jqXHR) {
        //Hide spinner

    });
Rajesh P
  • 343
  • 1
  • 8
  • What's the difference between this and the first solution provided? The binding event? – ReynierPM Jul 17 '17 at 13:59
  • This will take care of all the AJAX calls fired in your application. Whereas, the first one is specific to a particular call. You will have to add call backs for each and every request. – Rajesh P Jul 17 '17 at 14:02
  • Ohh sorry I meant the solution I provided on the OP, the one binding exactly the same events as yours, that's the difference I am looking for :-) – ReynierPM Jul 17 '17 at 14:04
  • @RajeshP you did the job i was suppose to do, just confirming from OP that exactly what he want. anyway good job, thums up ^^^ – Koushik Chatterjee Jul 17 '17 at 14:10
  • 1
    ajaxStart event is fired when the first AJAX call in a group of calls is fired. ajaxStop is fired when the last AJAX call in a group of calls is finished. Whereas, ajaxSend and ajaxComplete are fired for each request at the start and end of a request respectively. – Rajesh P Jul 17 '17 at 14:12
0

Using always(), despite the non-descriptive method naming, works if you want to wait for the ajax request to complete.

 }).always(function () {
      load_end();                             
 });