Question

I was wondering if there was a quick and easy way to put a loading gif int a jquery $.Post function?
I am thinking I would most likely have to put it into the body of the function somehow. I want to kind of overlay the page in a kind of haze, with that spinny Loading gif, or maybe the horizontal barbershop bar thingy. I have the images in my mvc images folder already, Just need to figure out my options for implementing it.

Thanks

Answer 1

I assmume there is an event which occurs to start the ajax post off? In which case, you would need to display your loading image before calling the ajax. Then when the call returns, you would need to hide the loading image.

For example:

$("#button").click(function() {
    // show loading image
    $("#loadingImage").show();

    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: function(data) {
            // Your logic here...

            // hide loading image
            $("#loadingImage").hide();
        }
    });
});

HTML

<input type="button" id="button" value="Load data" />
<img src="loading.gif" id="loadingImage" style="display: none;" />