Changing ajax POST data for a second request using .done() instead of success

Question

I've got myself a bit confused here.

I've written a bunch of Ajax functions that trigger each other in succession following a valid success response from the previous one.

Example... (I've removed massive parts of the code that check for various data.response's to make it clearer).

var var1 = "";
var var2 = "";
var var3 = "";

$(document).ready(function(){
    functionOne();
});

function functionOne() {
    $.ajax({
        url: "http://somewebsite.com/api/index.php",
        dataType: "json",
        method: "POST",
        cache: false,
        data : {
                "action": "new",
                "id": 1234,
                "amount": 10
        },
        success: function(data) {

            if(data.response == "Y") {
              var1 = data.var1;
              var2 = data.var2;
              var3 = data.var3
              functionTwo(var1, var2, var3);
            }

        },
        error : function(xhr, status) {
          console.log("something went wrong");
        },
        timeout: 200000
   });
}

functionTwo(var1, var2, var3) {
   $.ajax({
      url: "http://somewebsite.com/api/index.php",
      dataType: "json",
      method: "POST",
      cache: false,
      data : {
              "action": "check",
              "id": var1,
              "amount": var2,
              "var3" : var3
      },
      success: function(data) {

          if(data.response == "Y") {
            var1 = data.var1;
            var2 = data.var2;
            var3 = data.var3
            functionThree(var1, var2, var3);
          }

      },
      error : function(xhr, status) {
        console.log("something went wrong");
      },
      timeout: 200000,
  });  
}

And so on...

But I'm now planning to move them all into one single function which will spit out the result of all functions at the end.

I was going to nest the Ajax requests using success: but then started reading about .done() and how this is a much better approach, especially for chaining functions like this.

But I'm a bit confused on how I would send the differing POST data and variables to subsequent calls using this method.

I've seen this here but it doesn't go into any detail of how to pass in the new POST data elements for the new request.

 asyncCall()
 .then(function(data1){
  // do something...
  return anotherAsyncCall();
 })
 .then(function(data2){
  // do something...  
  return oneMoreAsyncCall();    
 })
 .then(function(data3){
  // the third and final async response
 })
 .fail(function(err) {
  // handle any error resulting from any of the above calls    
 })
 .done();

Could somebody please show me a rough example of how to fire functionOne using .done() to call functionTwo passing in the three variables created in functionOne and the new data: action for the second Ajax request).

I think I found an answer here - https://stackoverflow.com/questions/10931836/should-i-use-done-and-fail-for-new-jquery-ajax-code-instead-of-success-and — user3717922, Nov 23 '17 at 19:11
This was actually really helpful if anybody else is looking for something similar - https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f — user3717922, Nov 23 '17 at 19:43
Possible duplicate of [Should I use .done() and .fail() for new jQuery AJAX code instead of success and error](https://stackoverflow.com/questions/10931836/should-i-use-done-and-fail-for-new-jquery-ajax-code-instead-of-success-and) — Danny Fardy Jhonston Bermúdez, Nov 23 '17 at 20:05

Constantine Theocharis · Accepted Answer · 2017-11-23T20:11:04.180

Edited to be more descriptive

Taken from https://stackoverflow.com/a/43173453/7357832

$(document).ready(function () {
  functionOne()
    .done(function (data) {
      //any other validation code can go in here
      if (data.response == "Y")
        return functionTwo(data.var1, data.var2, data.var3);
    })
    .done(function (data) {
      //this is the response for functionTwo. Another .done() can be created for a third function etc.
    })
    .fail(function (xhr, status) {
      console.log("something went wrong");
    })
});


function functionOne() {
  return $.ajax({
    url: "http://somewebsite.com/api/index.php",
    dataType: "json",
    method: "POST",
    cache: false,
    data: {
      "action": "new",
      "id": 1234,
      "amount": 10
    },
    timeout: 200000
  })
}

function functionTwo(var1, var2, var3) {
  return $.ajax({
    url: "http://somewebsite.com/api/index.php",
    dataType: "json",
    method: "POST",
    cache: false,
    data: {
      "action": "check",
      "id": var1,
      "amount": var2,
      "var3": var3
    },
    timeout: 200000,
  });
}

Thanks for the reply but that doesn't tell me anything I haven't already seen. I understand the concept, but my confusion lies in how to spell this out with regards to my functions. Each of my functions does other things (like printing info to the screen), how do I address that? By using a .done() in each of my functions? The whole thing just seems to be very confusing at the moment, I just need a little noob guidance. — user3717922, Nov 23 '17 at 19:35
Edited to be more descriptive, hope it makes more sense now. — Constantine Theocharis, Nov 23 '17 at 20:02

Changing ajax POST data for a second request using .done() instead of success

1 Answers1