Combine multiple Ajax load functions

Question

I am making a dashboard reporting tool that loads multiple charts on the selection of some filters. I use Ajax to load the charts and use Ajaxload to have a small circle as a waiting symbol. Something like:

I want to combine all those circles into one circle in the center, like any normal ecommerce website. The ajax code is below:

$.ajax({
    type: "POST",
    data: {
        "jsontring": JSON.stringify(output)
    },
    url: "http://localhost:8080/sales",
    contentType: "application/json",
    dataType: "json",
    cache: false,
    beforeSend: function () {
        $('#container').html("<img class = 'ajload' src='loading.gif' />");
        $('#container1').html("<img class = 'ajload' src='loading.gif' />");
    },

    success: function (data) {
        datavol = data.Vol
        dataval = data.Val
        $('#container').highcharts(datavol);
        $('#container1').highcharts(dataval);
    },
    error: function () {
        alert("Sales Issue!")
    },

});


$.ajax({
    type: "POST",
    url: "http://localhost:8080/soc",
    data: {
        "jsontring": JSON.stringify(output)
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    beforeSend: function () {
        $('#container3').html("<img class = 'ajload' src='loading.gif' />");
        $('#container4').html("<img class = 'ajload' src='loading.gif' />");
    },

    success: function (data) {
        datavol = data.Vol
        dataval = data.Val
        $('#container3').highcharts(datavol);
        $('#container4').highcharts(dataval);
    },
    error: function () {
        alert("Soc Issue")
    },

});




$.ajax({
    type: "POST",
    url: "http://localhost:8080/marketshares",
    data: {
        "jsontring": JSON.stringify(output)
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    beforeSend: function () {
        $('#marketshares').html("<img class = 'ajload' src='loading.gif' />");
        $('#marketshares1').html("<img class = 'ajload' src='loading.gif' />");
    },

    success: function (data) {
        datavol = data.Vol
        dataval = data.Val
        $('#marketshares').highcharts(datavol);
        $('#marketshares1').highcharts(dataval);
    },
    error: function () {
        alert("MarketShares Issues")
    },

});

Is there any specific fucnctiuon for this?

Answer 1

Take a global var for number of ajax call;

isLoadedAll=4; //4 ,let 4 is the number of $.ajax call.

Use one container for loading image. After a success call a function that checks all ajax success.

 function checkAllLoaded(){
--isLoadedAll;
if(isLoadedAll==0)
    //do stop loading image here.
}

before send

beforeSend: function() {
        $('#container').html("<img class = 'ajload' src='loading.gif' />");
        $('#container1').html("<img class = 'ajload' src='loading.gif' />");
}

on each success

success: function(data)
         {
              checkAllLoaded();
              //do other stuff here
         }

hope that help.

Answer 2

Ajaxcomplete() Description: Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

1. You have to create an overlay and center load div, See Exmaple Here , eg :

    <div class="loading">Loading</div> 

2. You have after that to create a global variable eg var count=0 and increment this variable in every success function eg count++; :

    success: function (data) { ..... count++; } 

3. After that You can use a condition inside Ajaxcomplete() function that execute after every ajax request eg :

    $( document ).ajaxComplete(function() { if(count == 3) //I guess that you have 3 chart to load $('.loading').hide(); }); 

NOTE : You can remove the beforeSend() .

Hope this will answer your question.

Answer 3

First load your ajax loader image as:

$(document).ajaxStart(function () {
        //here call your ajax loader image
});

And after ajax complete hide your loader image

$(document).ready(function(){
    $.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
    // here hide your ajax loader image
  });
});

check this link