Show Processing image on web page for Synchronous Ajax

|
| By Webner

Problem: When we fire a Synced ajax call it blocks all the other functionality of that tab of the browser and fires/executes other event or code only after the synced ajax gets back with its response. Also the code fires the ajax call very quickly that’s why if we use some statement before the ajax or beforeSend event of ajax to show some kind of processing sign that does not work.

Solution: To solve this problem we need to use setTimeout() function of javascript. This function require two arguments. First is the function and second is the time in milliseconds.

We need to use this function because we need to create a pause before the code calls the ajax.

I’ve used it on the click of a link.

Here is the example:

<a onclick=”document.getElementById('modal1').style.display='block';setTimeout(function(){syncAjaxfn()},500);”>call ajax</a>
document.getElementById('modal1').style.display='block';

Above statement is used to show processing. We can use any javascript statement to show
processing symbol of our choice.

setTimeout(function(){syncAjaxfn()},500)

Above statement is used to call that function which contains synced ajax call. This function will be
called after 0.5 seconds (500 milliseconds) after the click of above created link. We can increase
or decrease this time according to our convenience.

Leave a Reply

Your email address will not be published. Required fields are marked *