Question

How do I add a “loading” image to the following code. Here is what I mean. If I add a button to this code and the user clicks it. The content from the php file will load in the div with an id of “notifications” but while the php file is processing I want to show a loading image. I will get an image from this website http://www.ajaxload.info/

function onSuccess(data, status) {
    data = $.trim(data);
    $("#notification").html(data);
}

function onError(data, status) {
    // handle an error
}        

$(document).ready(function() {
    $("#submit").click(function(){

        var formData = $("#expander").serialize();

        $.ajax({
            type: "GET",
            url: "grab.php",
            cache: false,
            data: formData,
            success: onSuccess,
            error: onError
        });
        return false;
    });
});

Answer 1

Something like this:

var $loader = $('<div />').attr('id', 'loader');
var $spinner = $('<img />').attr('src', 'ajax-loader.gif')
    .attr('alt', 'Loading');
$loader.append($spinner);
$('body').children().last().after($loader);
$('body').ajaxStart(function() {
       $loader.show();
    }).ajaxComplete(function() {
       $loader.hide();
    });