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

Rory McCrossan · Accepted Answer · 2018-01-31 09:19:00Z

7

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);
    }
  });
});

edited Jan 31, 2018 at 9:19

answered Jan 31, 2018 at 9:08

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

B.Gees Over a year ago

Powerful !!! You save my life. Many thanks :). But why this async:false is a very bad practices if it is proposed?

Rory McCrossan Over a year ago

No problem, glad to help. It's a bit like eval() in that it exists, but there are a lot of much better ways of doing what you need.

Collectives™ on Stack Overflow

JQuery loader with AJAX working async:false

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related