How to show waiting message during sync ajax call in browser

Question

How to show waiting message on sync ajax call in browser ? I tried code below, turned web server off but "Saving" message is not displayed.

After some time only error event from ajax call occurs, without any progress message.

How to show waiting message to user if sync ajax call is in progress ?

var myInfo = '<div class="ui-state-highlight ui-corner-all" style="position: fixed;' +
    'z-index: 10000; margin-top: 2%; margin-left: 2%">' +
    ' <br />' +
    '&nbsp;<span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>' +
    '<strong>Saving</strong>&nbsp;<br />' +
    '<br /></div>'
$('#_info').html(myInfo);
$('#_info').show();

$.ajax( 'save',
   {
       async: false,
       type: 'POST'
    } );

Answer 1

Your problem is that you're using a synchronous AJAX call and that pretty much locks up the browser until it completes. In particular, the browser won't be able to show your "loading" message before you hit the $.ajax({async:false}) lockup; for example, watch what this does:

http://jsfiddle.net/ambiguous/xAdk5/

Notice that the button doesn't even change back to the unclicked visual state while the AJAX is running?

The solution is to show your loading message, hand control back to the browser, and then lock everything up with your synchronous remote call. One way to do this is to use setTimeout with a delay of zero:

$('#_info').html(myInfo);
$('#_info').show();
setTimeout(function() {
    $.ajax('save', {
        async: false,
        type: 'POST',
        complete: function() {
          $('#_info').hide();
        }
    });
}, 0);

For example: http://jsfiddle.net/ambiguous/zLnED/

Some care will be needed of course as this won't be the same inside the setTimeout callback as it was outside but that's easy to take care of.

Using async:false isn't a very nice thing to be doing to your users though, you should try to avoid it unless it is absolutely necessary (and it rarely is).

Answer 2

<div class="loading">Loading...</div>

Your ajax call:

$('.loading').fadeIn(50, function() {
   $.ajax( 'save',
   {
      async: false,
      type: 'POST'
   } );
});

$('.loading').fadeOut(50);