JQuery ajax function extension

Question

I want to extend the ajax function so that whenever it is called an image, it appears on a page indicating that the content is loading.

I can use prefilters, as discussed on this page http://api.jquery.com/extending-ajax/ , to show the image, but how can I hide the image after completing the request

Answer 1

Please see here: Ajax Global Event Handlers

This makes it trivial to create a boot image whenever an ajax request is sent via jQuery. No expansion required.

Answer 2

See Global Ajax Event Handlers

Using ajaxStart and ajaxStop , you can control the downloadable image that appears when ajax request is run, and hide it when all requests are completed (or one with ajaxSuccess )

Answer 3

you can use ajaxStart

 $("#loading").ajaxStart(function(){ //show loading imag here }); 

and when successfully deleting the image

Answer 4

The following code will work for you:

 $("#loading").ajaxStart(function () { $(this).show(); }) .ajaxStop(function () { $(this).hide(); }); 

Answer 5

/ * show the message that data is being loaded every time ajax is called * /

 var loadingMessage = 'Please wait loading data for ' + defaultUserName; $(document).ready(function() { $("#Loadstatus").bind("ajaxSend", function() { $(this).text(loadingMessage); $(this).show(); }).bind("ajaxComplete", function() { $(this).hide(); }); }); 

And, if you want to put a background image in an element using your CSS, you can - an animated gif is shared.