How to find if an ajax call is completed?

Question

Peace And blessing be upon you :)

Basically I have two function, each performs an ajax call. Something like:

1:

function step1(){
    var formdata = new FormData();
    formdata = {
    'URI': sendtosev
    };
    $.ajax({
       type: 'POST', 
       url: 'http://localhost:20012/serv1', 
       data: formdata,
       contentType: "text/html",
       success: function(result){
          $('.UID).text(result);
       }
    });
}

2:

function step2(){
    var stkname=$('.UID').text();
    var formdata = new FormData();
    formdata = {
    'URI': stkname
    };
    $.ajax({
       type: 'POST', 
       url: 'http://localhost:20012/serv1', 
       data: formdata,
       contentType: "text/html",
       success: function(result){
          alert(result);
       }
    });
}

FYI: step1 ajax is performed to get some data from serv1 servlet. and step2 ajax uses step1 ajax output and through it get some new Data from serv2.

Now Currently What I'm doing is:

$(function({
   step1();
   step2();
});

Through this step2 FormData is null because step1 has not yet finished it's call and haven't received its output.

Question: How to find if step1() ajax is completed and have received the output So I could call step2();

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jonas Wilms, Apr 27 '17 at 18:09
Read through this for an explanation of async calls and how to use them: http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Jason P, Apr 27 '17 at 18:10

Jonas Wilms · Accepted Answer · 2017-04-27T18:17:43.453

3

function step1(){
var formdata = new FormData();
formdata = {
'URI': sendtosev
};
$.ajax({
   type: 'POST', 
   url: 'http://localhost:20012/serv1', 
   data: formdata,
   contentType: "text/html",
   success: function(result){
      $('.UID').text(result);
      step2();
   }
});
}
//step2 implementation

//start with
step1();

Simply call step2 if step1 succeeded...

edited Apr 27 '17 at 18:17

answered Apr 27 '17 at 18:09

Jonas Wilms

132,000
20
149
151

score 1 · Answer 2 · answered Apr 27 '17 at 18:11

You can use jquery callback functions. Please see below code for reference

function step1(callback){
    var formdata = new FormData();
    formdata = {
    'URI': sendtosev
    };
    $.ajax({
       type: 'POST', 
       url: 'http://localhost:20012/serv1', 
       data: formdata,
       contentType: "text/html",
       success: function(result){
          $('.UID).text(result);
          callback(result);
       }
    });
}

function step2(result){
    var stkname=$('.UID').text();
    var formdata = new FormData();
    formdata = {
    'URI': stkname
    };
    $.ajax({
       type: 'POST', 
       url: 'http://localhost:20012/serv1', 
       data: formdata,
       contentType: "text/html",
       success: function(result){
          alert(result);
       }
    });
}

$(function({
   step1(function(result){
        step2();
   });
});

score 0 · Answer 3 · answered Apr 27 '17 at 18:12

This is a good candidate for callbacks. For example, step1 could be rewritten as follows:

function step1(callback){
    var formdata = new FormData();
    formdata = {
    'URI': sendtosev
    };
    $.ajax({
       type: 'POST', 
       url: 'http://localhost:20012/serv1', 
       data: formdata,
       contentType: "text/html",
       success: function(result){
          $('.UID').text(result);
          callback();
       }
    });
}

And then you can code the following when you call it:

step1(step2);

score 0 · Answer 4 · answered Apr 27 '17 at 18:13

0

2 ways to accomplish it

pass 'async:false' to $.ajax parameter. then $.ajax will not return until the response come
call step2() in ajax callback function

answered Apr 27 '17 at 18:13

jesuisgenial

685
1
5
15

How to find if an ajax call is completed?

4 Answers4