Javascript variable does not update via ajax

Question

I believe I haven't fully grasped variable scope in jQuery and need some help to understand why the variable "final_shasign" comes out fine inside the AJAX but is undefined outside the AJAX despite it being declared outside of the AJAX.

var final_shasign; // initial declaration outside of ajax block below

$.ajax({
    type: "POST",
    url: "sha.php",
    data: "amount="+amount+"&cn="+cn+"&currency="+currency+"&language="+language+"&orderid="+orderid+"&pspid="+pspid,
    success: function(response_data, final_shasign){
        var parsed_data = $.parseJSON(response_data);
        final_shasign = parsed_data.shasign;
        console.log ("inside nested ajax: " + final_shasign); //comes out fine
    }
});

console.log ("outside of nested ajax: " + final_shasign); //comes out as undefined!

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Qantas 94 Heavy, Feb 27 '14 at 13:04

score 3 · Answer 1 · edited May 23 '17 at 12:11

This is because your console.log() outside of the AJAX statement is being executed before the AJAX response has returned and updated the variable value.

AJAX is asynchronous so your code after the AJAX statement will run before the response has had chance to be returned from "sha.php".

If you wish to prevent the request acting asynchronously, you can set async:false on the $.ajax() method.

$.ajax({
    type: "POST",
    url: "sha.php",
    data: "amount="+amount+"&cn="+cn+"&currency="+currency+"&language="+language+"&orderid="+orderid+"&pspid="+pspid,
    async: false,
    success: function(response_data, final_shasign){
        var parsed_data = $.parseJSON(response_data);
        final_shasign = parsed_data.shasign;
        console.log ("inside nested ajax: " + final_shasign); //comes out fine
    }
});

But this isn't recommended! Instead any javascript which is reliant on the AJAX response should be called in the success callback function.

var final_shasign;

$.ajax({
    type: "POST",
    url: "sha.php",
    data: "amount="+amount+"&cn="+cn+"&currency="+currency+"&language="+language+"&orderid="+orderid+"&pspid="+pspid,
    async: false,
    success: function(response_data, final_shasign){
        var parsed_data = $.parseJSON(response_data);
        final_shasign = parsed_data.shasign;
        console.log ("inside nested ajax: " + final_shasign); //comes out fine
        Func();
    }
});

function Func(){
   console.log ("outside of nested ajax: " + final_shasign);
}

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

AJAX is asynchronous, so at time you try to read value of variable outside the ajax callback functions, it's still undefined.

So code your logic using variable value inside the callback function, here success callback.

You could use a defered object too.

Please read that: How do I return the response from an asynchronous call?

edited May 23 '17 at 10:32

Community

1
1

answered Jul 03 '13 at 10:05

A. Wolff

74,033
9
94
155

score 0 · Answer 3 · answered Jul 03 '13 at 10:07

you can try like this

success: function(response_data, final_shasign){
    var parsed_data = $.parseJSON(response_data);
    final_shasign = parsed_data.shasign;

    passFinalvalue(final_shasign) 
    console.log ("inside nested ajax: " + final_shasign); //comes out fine
}

function passFinalvalue(getval)
{
 //do your stuff
}

Javascript variable does not update via ajax

3 Answers3

Linked

Related