CODEWITHSUNDEEP
javascriptjqueryajax
Mr. Nobody
Mr. Nobody

Reputation: 89

How to find if an ajax call is completed?

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();

Upvotes: 0

Views: 69

Answers (4)

Jonas Wilms
Jonas Wilms

Reputation: 138237

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

Upvotes: 3

jesuisgenial
jesuisgenial

Reputation: 725

2 ways to accomplish it

  1. pass 'async:false' to $.ajax parameter. then $.ajax will not return until the response come

  2. call step2() in ajax callback function

Upvotes: 0

Briguy37
Briguy37

Reputation: 8402

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);

Upvotes: 0

ganesh deshmukh
ganesh deshmukh

Reputation: 330

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();
   });
});

Upvotes: 1

Related Questions