How to show a waiting message during ajax call synchronization in a browser

How to show a waiting message when synchronizing an ajax call in a browser? I tried the code below, turned off the web server, but the message "Save" is not displayed.

After some time has passed, only the event with the ajax event occurs, without any progress message.

How to show a waiting message to a user if an ajax call is being made?

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' } ); 
+4
source share
2 answers

Your problem is that you are using an AJAX synchronous call and almost block the browser until it finishes. In particular, the browser will not be able to show your β€œdownload” message before you press the lock $.ajax({async:false}) ; for example, see what this does:

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

Please note that the button doesn’t even go back to the unencrypted visual state while AJAX is running?

The solution is to show your boot message, manually control it back to the browser and then block everything with your synchronous remote call. One way to do this is to use setTimeout with a delay of 0:

 $('#_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/

Of course, some caution will be required since this will not be the same in the setTimeout callback since it was outside, but this is easy to take care of.

Using async:false is not a good thing for your users, but you should try to avoid this if it is absolutely necessary (and this rarely happens).

+11
source

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

Your ajax call:

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

All Articles