Use ajax success data as variable in second ajax call

Question

I have a script that makes two ajax calls - the second being contained within the success handler of the first.

However I need to use the data captured within the first success handler as a further variable to pass in the second ajax call and then use that variable within the php file that is undertaking the server side processing.

This is all very new to me, so I hope this makes some sort of sense. If anyone could assist that would be great.

$.ajax({
    type: 'POST',
    timeout: 500000,
    url: 'processone.php',
    data: $('form').serialize(),
    success: function (data) {
        alert("success data from processone is " + data);
        var lead_id = data;

        $.ajax({
        type: 'POST',
        timeout: 500000,
        url: 'processtwo.php?lead_id'+lead_id,
        data: $('form').serialize(),
        success: function (data2) {
            alert("success data from processtwo is " + data2)
        }
    });
    }
});

Not sure of your exact need (do you need to append the return from AJAX call 1 to the serialized form in call 2 or not?) but you have access to the data variable in the 2nd ajax call, so you can do whatever you'd like with it. — veddermatic
– veddermatic, Commented Feb 9, 2014 at 14:27
Sorry - the script is working fine apart from the fact that the var is not being passed in the second ajax call — user3091415
– user3091415, Commented Feb 9, 2014 at 14:28
@user3091415 does no data at all reach the server the second call? — display-name-is-missing
– display-name-is-missing, Commented Feb 9, 2014 at 14:29

yalight · Accepted Answer · 2014-02-09 14:28:54Z

1

I think you lose a "=" sign in the code:

url: 'processtwo.php?lead_id='+lead_id,

answered Feb 9, 2014 at 14:28

yalight

3082 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joshua · Accepted Answer · 2014-02-09 14:34:12Z

0

You're going to want to split these into two separate functions and allow for a parameter to be passed to the second. Not really part of your question, but should make it much easier to read. The second process seems to be missing an equals sign in the url parameter which will cause it to not work

function processOne() {
$.ajax({
    type: 'POST',
    timeout: 500000,
    url: 'processone.php',
    data: $('form').serialize(),
    success: function(data) {
        //alert("success data from processone is " + data);
        //console logs are better to use when debugging data
        console.log('SUCCESS DATA', data);
        var lead_id = data;
        processTwo(lead_id);
    }
});

}

function processTwo(lead_id) {
$.ajax({
    type: 'POST',
    timeout: 500000,
    url: 'processtwo.php?lead_id=' + lead_id,
    data: $('form').serialize(),
    success: function(data2) {
        alert("success data from processtwo is " + data2);
    }
});

}

If you're still not getting anything make sure the data is directly returning the lead_id. AJAX calls commonly return JSON data, so it very well might be something like data.lead_id or something like that. Alerts aren't useful for showing this so you could use the console log, console.log('SUCCESS DATA', data) to dig into the return data.

answered Feb 9, 2014 at 14:34

Joshua

1,2903 gold badges17 silver badges33 bronze badges

2 Comments

user3091415 Over a year ago

thanks for this @Josh. As per my comment on the suggestion made by yalight the missing "=" sing was causing it to fail. That aside though, what is the benefit of splitting the code into two separate functions - does it simply make it easier to understand or are there any further benefits.

Joshua Over a year ago

It's generally good practice, if that's all you're using it for then the only real benefit will be making it easier to understand. As your project grows though if you separate it out then you'll be able to reuse processOne and processTwo from other functions if needed. JavaScript can turn ugly quickly, so I'd argue that good organization and readable code is paramount. Glad you got it working though!

veddermatic · Accepted Answer · 2014-02-09 14:36:29Z

0

Given the reply to my comment, and making the assumption that the data returned from the first AJAX call is a simple string value (if it's not, you can still use the code here to see how you need to do what you need to do). jQuery's serialize() returns a string (see https://api.jquery.com/serialize/) so you can just append to that.

Also, you are missing your = sign when making your URL, so if you are trying to get the lead_id as a GET var, that's why it's not working.

$.ajax({
    type: 'POST',
    timeout: 500000,
    url: 'processone.php',
    data: $('form').serialize(),
    success: function (data) {
        alert("success data from processone is " + data);
        var lead_id = data;

        $.ajax({
        type: 'POST',
        timeout: 500000,
        // you are missing the equals sign here, which is why this doesn't work as a GET
        url: 'processtwo.php?lead_id'+lead_id,
        // here we tack on a lead_id variable to the serialized form and give
        // it the value you got back from query 1
        data: ($('form').serialize() + "&lead_id=" + lead_id),
        success: function (data2) {
            alert("success data from processtwo is " + data2)
        }
    });
    }
});

answered Feb 9, 2014 at 14:36

veddermatic

1,0827 silver badges16 bronze badges

1 Comment

user3091415 Over a year ago

this works great @veddermatic as an option to pass the var along with the serialized data - many thanks

Collectives™ on Stack Overflow

Use ajax success data as variable in second ajax call

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related