Show progress image while finishing my $.ajax request

Question

I have this code :

data = new FormData($('#form')[0]);
$.ajax({
    type: 'POST',
    url: 'systems/createpostsystem.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false
}).done(function(data) {
    alert(data);
    window.location = "myposts.php";
});

I have used $.ajaxStart() and it didn't do what I want.

Also I tried success:function(){my code} and made my request twice !

Now I want to show a progress image while this AJax complete.

Possible duplicate of [Jquery Ajax Loading image](http://stackoverflow.com/questions/8761713/jquery-ajax-loading-image) — Alex Andrei, Jan 18 '16 at 15:36
Just show your "loading image" when you call your AJAX and hide it on ".done()". An easy way. — Y.Hermes, Jan 18 '16 at 15:54

score 3 · Accepted Answer · answered Jan 18 '16 at 16:01

Add your loading image (I'm assuming a gif) before executing your ajax function. On success, remove the image and replace it with whatever you desire (success image, data returned from server, etc).

Example:

var formData = new FormData($('#form')[0]);
var imageContainer = $('#selector');
imageContainer.attr('src', 'path/to/loading.gif');
$.ajax({
    type: 'POST',
    url: 'systems/createpostsystem.php',
    data: formData,
    success: function(data) {
        // Do something
    }
});

javascript ajax jquery dom

Alessandro · Answer 2 · 2016-01-18T16:48:34.413

You just need to edit the DOM before doing the AJAX request, adding your loader, and then to remove it in the complete callback. I usually use the jQuery callback functions rather than the XHR object callbacks.

Mind that:

the success callback (and the done XHR callback) is called only when the request completes successfully
the complete (and the always XHR callback) is called always, even if the request fails.

Example:

function addLoader() {
    var img = $('<img />', { 
      id: 'loader',
      src: '/path/to/your/loader.gif'
    });
    img.appendTo($('body'));
}
function removeLoader() {
    $('#loader').remove();
}

addLoader(); // here the we add our loader
data = new FormData($('#form')[0]);
$.ajax({
    type: 'POST',
    url: 'systems/createpostsystem.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    complete: function() {
        removeLoader(); // here we remove it
    },
    success: function(data) {
        alert(data);
        window.location = "myposts.php";
    }
});

Show progress image while finishing my $.ajax request

2 Answers2