I have 2 functions in my Javascript.One has multiple ajax calls to get the data and other displays the data.The functions are not executed in sequence

Question

Sample Code

$( document ).ready(function() {
    getData();
    LoadData();
});

function getData() {
        alert('getData');
        Data='';
        $.ajax({
            type: "GET",
            url: "http://localhost:34126/SAL/FCDataService.svc/GetMonthlyInvValue",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: {},
            processdata: true,
            async: false,
            success: function (json) {
                Data= json;
               alert('Data:' + Data);
            },
            error: function (e) {
                alert('error ' + e.status + '  ' + e.responseText);
            }
        });

}

function LoadData() {
        alert('LoadData');

    }

The expected Output: getData Data:{"label": "Jan", "Value": "1"} LoadData

The actual Output : getData LoadData Data:{"label": "Jan", "Value": "1"}

What am I doing wrong.Please help me!!

Yes, I have shown only one ajax call here, but my code there are multiple. I have want to call Loaddata() function after all the ajax calls are done. — CrazyCoder, Nov 13 '17 at 05:56
Do do synchronous ajax calls -- instead look at how to do promise for each ajax call, and create a promise array and run your loadData function when all the promises resolves — Soren, Nov 13 '17 at 06:07
@Soren, It would be helpful if you could show me an example for this. — CrazyCoder, Nov 13 '17 at 06:17
@CrazyCoder - There are plenty of example already without I have to write one, this was on the first result page I found in a search: https://stackoverflow.com/a/44691096/668501 — Soren, Nov 13 '17 at 06:32

Shankar · Answer 1 · 2017-11-13T06:42:44.987

why don't you call LoadData() after success? like below

$( document ).ready(function() {
    getData();

});

function getData() {
        alert('getData');
        Data='';
        $.ajax({
            type: "GET",
            url: "http://localhost:34126/SAL/FCDataService.svc/GetMonthlyInvValue",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: {},
            processdata: true,
            async: false,
            success: function (json) {
                data= json;
               alert('Data:' + data);
                LoadData();
            },
            error: function (e) {
                alert('error ' + e.status + '  ' + e.responseText);
            }
        });

}

function LoadData() {
        alert('LoadData');

    }

UPDATE :

as you said , you are having multiple ajax calls,

one work around could be ,

try setting flag for each ajax call and make them true on respective success event , and lastly you need to call loadData() from all success completion and in loadData(){ ...} body check all the success are completed or not,

$( document ).ready(function() {
    getData();
     $flag1= flase;
     $flag2= flase;
     $flag3= flase;
     $flag4= flase;


});


  function LoadData() {
         if($flag1 && $flag2 && $flag3 && $flag4)
             {
                   alert('LoadData');
             }    
       }

and in each ajax call's success

         success: function (json) {
            data= json;
           alert('Data:' + data);
           $flag1=true;
            LoadData();
        },

and don't forget to make all flag false in $(document).ready(){}

In my actual code, there are multiple ajax calls which gets different json objects. Load charts uses these jsons together and does some calculations. So I cannot call LoadData() each time. — CrazyCoder, Nov 13 '17 at 05:49

score 0 · Answer 2 · answered Nov 13 '17 at 05:17

0

Inside success function call the LoadData() function

success: function (json) {
    Data= json;
    alert('Data:' + stackMonthData);
    LoadData();
},

answered Nov 13 '17 at 05:17

arun

4,595
5
19
39

I cannot. Because in getData(), there are multiple ajax calls. In sample I have given only one call.But in my actual code there are multiple calls to get different data.And LoadData() function uses all these data. – CrazyCoder Nov 13 '17 at 05:22

score -1 · Answer 3 · answered Nov 13 '17 at 06:02

AJAX is asynchronous process ans ajax request start in different thread, so JavaScript not wait for AJAX response, so there is two possible way to handle it

Make AJAX request in synchronous process, by pass async:false in jquery AJAX parameter
call getData() function in AJAX callback liks success/error or done/faild callback something like

$.ajax({ // your code }).done(function(data) { getData() }).fail(function(data){ });

I have 2 functions in my Javascript.One has multiple ajax calls to get the data and other displays the data.The functions are not executed in sequence

3 Answers3

UPDATE :