Solutions:
1. Change the logic to use asynchronous ajax calls.
This may require some re-factoring of the code and be time consuming
but is the best solution.
but is the best solution.
2. If decided to keep the ajax call synchronous then put this ajax call into setTimeout to call it with delay and be able to show the animation of any type (e.g. loading spinner) , this can be shown for some short moment like 300 milliseconds before the UI will be locked by sync ajax call.
$('#go').click(function() {
$(this).after('<div id="loading">Loading...</div>');
setTimeout(function() {
$.ajax({
url: '/echo/html/',
type: 'post',
async: false,
data: {
html: '<p>AJAX DONE</p>',
delay: 3
},
success: function(data) {
console.log(data);
$('#go').after(data);
},
error: function() {
alert('Error!');
},
complete: function() {
$('#loading').remove();
}
});
}, 0);
});
help URL http://jsfiddle.net/ambiguous/zLnED/