Problems with ajax load in safari and chrome

Question

I have a problem when running ajax requests, in Safari and Chrome, not in firefox

var doStuff = function(){
 callLoadingScreen();
 jsRoutes.controllers.SomeController.someServerSideMethod().ajax({
 //ajax stuff
 });
 closeLoadingScreen();
}

In safari and chrome, when doStuff() is called callLoadingScreen() method is skipped, but the ajax request is sent and only after the ajax request is completed than the method callLoadingScreen() is loaded.

In firefox everything works as its supposed to, but not in chrome and safari. Is this some play issue, or is it a jquery problem. I have tried a lot of fix, but none seem to work.Is there something I am missing, I have done this kind of loading before but don't remember having this issue.

Any help or feedback is welcome. Thank you.

Answer 1

Assuming your code is not running an ajax call with async: false which you should never do, it should not work as-is on any browser.

You need to wait for the Ajax call to complete before calling closeLoadingScreen:

e.g.

var doStuff = function(){
 callLoadingScreen();
 jsRoutes.controllers.SomeController.someServerSideMethod().ajax({
 //ajax stuff
       complete: function(){
           closeLoadingScreen();
       }
 });
}

In your example, it is doing this:

 callLoadingScreen();
 closeLoadingScreen();
 // Get response from Async Ajax call here sometime much later!

If you want to use promises instead, try it this way:

var doStuff = function(){
   callLoadingScreen();
   jsRoutes.controllers.SomeController.someServerSideMethod().ajax({
      //ajax stuff
   }).then(closeLoadingScreen);
}