{"id":251,"date":"2009-10-12T17:11:02","date_gmt":"2009-10-12T11:41:02","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=251"},"modified":"2016-08-24T15:45:45","modified_gmt":"2016-08-24T10:15:45","slug":"ajax-request-progress-indicator","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/ajax-request-progress-indicator\/","title":{"rendered":"Ajax Request Progress Indicator"},"content":{"rendered":"

In my current project, I used ajax to fetch data from the server to provide experience like Desktop Application<\/a>. I wanted to automatically show an indicator when an AJAX request is ongoing, and hide it when there is no such request. So I found the following solution for both the Prototype library and the JQuery library.<\/p>\n

Make sure the following HTML is included on every page where AJAX requests are made. (Place it in body of the main layout so that you do not have to repeat this HTML on each page.<\/p>\n

Make sure the following javascript code has been executed before any AJAX request is made. (Move this to a js file and include it in Heading part of the main layout).<\/p>\n

The above trick worked for me and hope it works for you guys too.<\/p>\n

Helpful links :-
\nhttp:\/\/www.prototypejs.org\/api\/ajax\/responders
\nhttp:\/\/docs.jquery.com\/Ajax\/jQuery.ajax<\/p>\n","protected":false},"excerpt":{"rendered":"

In my current project, I used ajax to fetch data from the server to provide experience like Desktop Application. I wanted to automatically show an indicator when an AJAX request is ongoing, and hide it when there is no such request. So I found the following solution for both the Prototype library and the JQuery […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":16,"footnotes":""},"categories":[1],"tags":[96,1178,55,27,138],"class_list":["post-251","post","type-post","status-publish","format-standard","hentry","category-technology","tag-ajax","tag-ajax-crawling","tag-javascript","tag-jquery","tag-prototype-library"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t