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

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

• javascript
• jquery
• ajax
• browser

• It was discussed just today here – Samich Commented Sep 4, 2011 at 19:00
• @Samich: My code and answer which link you posted work only with async ajax call. In my question I clearly stated that question is about sync ajax call. Add async: false option to the ajax call in the link which you posted and note that loading message does not appear anymore. – Andrus Commented Sep 4, 2011 at 19:07
• 1 just move $('.Loading').fadeOut(50); just after your ajax call – Samich Commented Sep 4, 2011 at 19:09

2 Answers 2

Your problem is that you're using a synchronous AJAX call and that pretty much locks up the browser until it pletes. 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/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',
        plete: function() {
          $('#_info').hide();
        }
    });
}, 0);

For example: http://jsfiddle/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).

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

Your ajax call:

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

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