Jquery Ajax Start and Stop method with fetch api

Question

I want to use the Jquery start and stop method to appear and disappear my spinner but I can't seem to work with jquery ajax start and stop method when im using the fetch api. how can i walk around this ?

$(document)
    .ajaxStart(function() {
        $buffer.show();
    })
    .ajaxStop(function() {
        $buffer.hide();
    })
;
fetch(url)
    .then(data => data.json())
    .then(thisObj => writeOnTheScreen(thisObj))
    })
;

Once way you can do it, is show you spinner just before executing ur ajax calls and once it is done(ajax calls), you can hide it. — Ajit Kumar Singh, Jun 28 '16 at 07:01
Possible duplicate of: https://stackoverflow.com/questions/37202078/ajaxstart-and-ajaxstop-equivalent-with-fetch-api — nvirth, May 22 '20 at 10:04

score -1 · Answer 1 · answered Jun 28 '16 at 07:08

Try this , Its working for me:

$(document).ajaxStop(function () {
    $('.ui-loader').hide();
});
$(document).ajaxStart(function () {
    $('.ui-loader').show();
    setTimeout(function () {
        $('.ui-loader').hide();
    }, 10000);
});

Note: Its not working if async = false.

score -1 · Answer 2 · edited Jun 28 '16 at 07:15

-1

Ideally, it should work, please check the version of the jquery which you are using, and that you should bind your handler to document

$(document).ajaxStart(function() {
   alert('ajax started');
});

You can also use a third party, Pace is easy to implement.

edited Jun 28 '16 at 07:15

Sender

6,660
12
47
66

answered Jun 28 '16 at 07:13

Yash Srivastava

850
2
9
15

I'm using fetch api as the title say not $.ajax – Trip1 Jun 28 '16 at 08:19
If you are using fetch api then you can use Promise to notify when it is completed. – Yash Srivastava Jun 28 '16 at 08:34

Jquery Ajax Start and Stop method with fetch api

2 Answers2