How to insert loading gif when ajax call is in progress

Question

I would like to show a loading gif by doing document.getElementById("loading").classList.remove("hidden") while this ajax called is in progress. And I would like to add the class hidden again soon after the ajax is done and before alert(responce) What kind of code should I put on my code? p.s. the rest of code is working correctly now. Thanks.

function move(moveName, gameID, playerID){
    var moveNameID = moveName.replace(/\s+/g, "").toLocaleLowerCase();
    var postParams = { 'guid' : gameID,
                       'pid' : playerID,
                       'movename' : moveNameID};
    var ajaxPromise = new AjaxPostPromise("url", postParams);
    ajaxPromise
        .then( function(response) {
            alert(response)
         })
        .catch( function(errorMessage){
            alert(errorMessage);
        });
}

Insert it right before the request (`var ajaxPromise = ...`) and remove it in both `then` and `catch` callbacks. — ibrahim mahrir, May 12 '17 at 21:47
Possible duplicate of [Jquery ajaxStart doesnt get triggered](http://stackoverflow.com/questions/2275342/jquery-ajaxstart-doesnt-get-triggered) — Ahmad Alfy, May 12 '17 at 21:50

score 2 · Answer 1 · edited May 12 '17 at 21:50

I think you pretty much answered your own question. Show your loading gif in the same function that you use to make your ajax call, then hide it again after the promise is returned

function move(moveName, gameID, playerID){
    var moveNameID = moveName.replace(/\s+/g, "").toLocaleLowerCase();
    var postParams = { 'guid' : gameID,
                       'pid' : playerID,
                       'movename' : moveNameID};
    var ajaxPromise = new AjaxPostPromise("url", postParams);
    //show your loading gif as you make your ajax call
    document.getElementById("loading").classList.remove("hidden");
    ajaxPromise
        .then( function(response) {
            // hide the gif after the promise is returned, whether successful or not
            document.getElementById("loading").classList.add("hidden");
            alert(response)
         })
        .catch( function(errorMessage){
            // here too (in case the request failed)
            document.getElementById("loading").classList.add("hidden");
            alert(errorMessage);
        });
}

Could just append an 'always' function so you only have to call the hide once: .always(function() { document.getElementById("loading").classList.add("hidden"); }); — Woodrow, May 12 '17 at 21:50
That worked correctly! Thank you for your help. I was thinking things too complicated... Your answer looks perfect. I'll mark it after 5 minuties! — Tak, May 12 '17 at 21:51

score 0 · Answer 2 · edited May 23 '17 at 11:47

Use a disposer pattern as it creates cleaner code:

function withSpinner(fn, el = document.getElementById("loading")) {
   spinner.classList.remove("hidden");
   return fn().always(() => spinner.classList.add("hidden"));
}

Which woud allow you to abstract the handling from your actual code:

function move(moveName, gameID, playerID){
    var moveNameID = moveName.replace(/\s+/g, "").toLocaleLowerCase();
    var postParams = { 'guid' : gameID, 'pid' : playerID, 'movename' : moveNameID};
    return withSpinner(() => {
      return new AjaxPostPromise("url", postParams);
    }).then(results => {
      // do something with results, spinner hidden automatically
    });
}

How to insert loading gif when ajax call is in progress

2 Answers2