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?

You are loading the image into different div it's unclear what you want, just use the same container. — michelem, Aug 12 '15 at 10:26
create an overlay div with the proper css and the loading symbol and then call it before AJAX call. — rrk, Aug 12 '15 at 10:28
So basically there is a time difference between the loading of the charts. Some take 2 secs and some take 5. I want the waiting symbol to be present until the last ajax call is passed and then all the carts to be displayed at the same time. — Tauseef Hussain, Aug 12 '15 at 10:32
check this http://stackoverflow.com/questions/4368946/javascript-callback-for-multiple-ajax-calls — Light, Aug 12 '15 at 10:46

Rasel · Answer 1 · 2015-08-12T10:46:39.610

2

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.

edited Aug 12 '15 at 10:46

answered Aug 12 '15 at 10:40

Rasel

5,488
3
30
39

Thank ypou so much for that solution. Probably I am very new to understand this. Is `checkAllLoaded` a built in function? I am not really clear with that part. – Tauseef Hussain Aug 12 '15 at 10:56

Zakaria Acharki · Accepted Answer · 2015-08-12T11:05:39.773

2

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

You have to create an overlay and center load div, See Exmaple Here, e.g :
```
<div class="loading">Loading</div>
```
You have after that to create a global variable e.g var count=0 and increment this variable in every success function e.g count++; :
```
success: function (data) {
      .....
      count++;
}
```

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

$( 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.

edited Aug 12 '15 at 11:05

answered Aug 12 '15 at 10:53

Zakaria Acharki

66,747
15
75
101

That was a very very detailed answer, definitely helpful for a beginner like me :) Thank you so much. – Tauseef Hussain Aug 12 '15 at 11:08
Sure! I am checking it now. – Tauseef Hussain Aug 12 '15 at 11:12

score 1 · Answer 3 · edited May 23 '17 at 12:14

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

Combine multiple Ajax load functions

3 Answers3