CODEWITHSUNDEEP
javascriptjquerycssajaxhighcharts
Tauseef Hussain
Tauseef Hussain

Reputation: 1079

Combine multiple Ajax load functions

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: enter image description here

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?

Upvotes: 0

Views: 308

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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, e.g :

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

  2. 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++;
}

  3. 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.

Upvotes: 2

Light
Light

Reputation: 1097

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

Upvotes: 1

Rasel
Rasel

Reputation: 5734

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.

Upvotes: 2

Related Questions