JQuery loader with AJAX working async:false

Question

I'm a newcomer to the jquery planet and I have no idea how to solve my problem. I have read all the answers to similar questions but none of them work for me. I work on MAC OS X and therefore Safari with JQuery 2.1.1, but in the end my platform will be shared online and must be compatible with other browsers.

PURPOSE: I would like to display a page containing my loading animation. however my JQuery function contains an ajax executable with async:false mode to be able to return the executed script's response. So I can't use the beforeSend and complete options. I tried to use a solution that I found on this post. Unfortunately my animation is not displayed

HTML:

<form id="myRun" method="post" action="" enctype="multipart/form-data">
    ... SOME ACTIONs ...
    <input class="demo" type="button" id="runner" value="Submit">
</form>
<div class="preloader" id="run_loader"><?php include('map/run_loader.php');?></div>

JS:

// Run platform
$('#runner').click(function() {
  $('#run_loader').show();
  setTimeout(function() {
      var results = function(){
        $.ajax({
          url : "php/runner.php",
          type: "post",
          global: false,
          async:false,
          data : $("#myRun").serializeArray(),
          success: function (response) {
            //alert(response);
            //window.location.href = response; *** DOESN'T WORK HERE ***
            $('#run_loader').hide();
            res = response;
          }
        });
        return res;
      }();
  }, 0);
  window.location.href = String(results);
});

QUESTION(s): Could you help me to run this loading page? Do you have any other comments about my code to improve myself?

Thanks in advance

Answer 1

Your problem is entirely caused by the use of async: false. The reason is because this stops the browser UI from updating while the request is in progress, leading users to believe the browser has crashed or hung. As such, it's a very bad practice which should never be used unless there is absolutely no alternative. If you check the console you'll even see the browser warning you not to use synchronous calls.

The assertion in your comment that window.location.href doesn't work in the success handler is false, it will work fine. If it's not working for you then there is an error being returned from the server side code to your AJAX call which you need to investigate and debug.

To improve your JS logic you should use the async callback pattern more effectively, by performing all logic that depends on the result of the AJAX call within the success event handler. You also don't need the timeout either. Try this:

$('#runner').click(function() {
  $('#run_loader').show();

  $.ajax({
    url: "php/runner.php",
    type: "post",
    data: $("#myRun").serializeArray(),
    success: function(response) {
      $('#run_loader').hide();
      window.location.assign(response);
    }
  });
});