Calling a function is JQuery after all ajax calls(number of ajax calls are dynamic) have received responses

Question

HTML:-

Result

Javascript:-

 $(document).ready(function(){ $("#result").html("function started here"); var requests = Array(); requests.push($.get('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA')); requests.push($.get('https://maps.googleapis.com/maps/api/geocode/json?address=EGL, Bangalore')); var defer = $.when.apply($, requests); console.log(defer); defer.done(function(){ $("#result").html("Completed");    // This is executed only after every ajax request has been completed    $.each(arguments, function(index, responseData){ // alert(index); $("#result").html(responseData);        // "responseData" will contain an array of response information for each specific request    }); }); }); 

The above snippet works only when all ajax calls returns "success" response. Is there any way where i can know if all ajax calls gets response,may it be "success" / "failure" .

Answer 1

you can you ajaxStart,ajaxStop,ajaxError,ajaxSuccess.

 $(document).ajaxStart(function () {
            //when ajax start
        }).ajaxStop(function () {
           //when ajax stop
        }).ajaxError(function () {
            //when ajax error
        }).ajaxSuccess(function () {
        // when ajax success
    });

This will trigger for every ajax call.