What is AJAX option that handle request while it's not complete?

Question

I want to show the loading image while AJAX request is not finished processing and hasn't come back from server, is there any options that handles the ajax while status is not complete

 jQuery.ajax({
            url: "/privileges/users/get-group-users",
            type: "POST",
            dataType: 'JSON',
            data: {
                "group_id":groupId
            },
            success: function(users){

            },
            error: function(e){

            }
        });

is there any option like success or error ???

possible duplicate of [Jquery Ajax Loading image](http://stackoverflow.com/questions/8761713/jquery-ajax-loading-image) — CD.., Aug 29 '12 at 10:35

score 2 · Accepted Answer · answered Aug 29 '12 at 10:35

2

use ajaxStart - ajaxStop :

<img src="img/loading.gif" style="display:none;" id="loading"/>

JS:

// if there is any ajax call the loading image will be visible
$("#loading").ajaxStart(function(){
   $(this).show();
 });

//if the ajax call stoped hide the loading image
$("#loading").ajaxStop(function(){
   $(this).hide();
 });

answered Aug 29 '12 at 10:35

mgraph

15,238
4
41
75

Can I get requested url inside ajaxStart callback function? I want to prevent loading image from appearing for some Ajax call . – palAlaa Aug 29 '12 at 11:14

score 0 · Answer 2 · answered Aug 29 '12 at 10:35

So long as you use an asynchronous AJAX request, it is implicitly in progress as soon as you call $.ajax(), and is finished when the success or error functions are called.

A better model when using modern jQuery (i.e. 1.5+) is this:

var jqXHR = $.ajax({ ... });    // don't put success and error in yet

var $splash = $(...).show();

jqXHR.always(function() {
    $splash.hide();
}).done(function(users) {
    ...
}).fail(function(e) {
    ...;
});

score 0 · Answer 3 · answered Aug 29 '12 at 10:38

0

You could use:

$('#loading').ajaxStart(function() {
  $(this).show();
}).ajaxComplete(function() {
  $(this).hide();
});

answered Aug 29 '12 at 10:38

xdazz

158,678
38
247
274

score 0 · Answer 4 · edited Jan 16 '16 at 10:14

Here are the callback hooks provided by $.ajax():

beforeSend callback is invoked; it receives the jqXHR object and the settings map as parameters.

error callbacks are invoked, in the order they are registered, if the request fails. They receive the jqXHR, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: "abort", "timeout", "No Transport".

dataFilter callback is invoked immediately upon successful receipt of response data. It receives the returned data and the value of dataType, and must return the (possibly altered) data to pass on to success.

success callbacks are then invoked, in the order they are registered, if the request succeeds. They receive the returned data, a string containing the success code, and the jqXHR object.

complete callbacks fire, in the order they are registered, when the request finishes, whether in failure or success. They receive the jqXHR object, as well as a string containing the success or error code.

Source : jQuery API

All the detail about $.ajax() is given in much detail

What is AJAX option that handle request while it's not complete?

4 Answers4