CODEWITHSUNDEEP
javascriptjqueryajax
Tyler Durden
Tyler Durden

Reputation: 303

Javascript variable does not update via ajax

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!

Upvotes: 0

Views: 3065

Answers (3)

Curtis
Curtis

Reputation: 103428

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

Upvotes: 3

Shinov T
Shinov T

Reputation: 862

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
}

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74410

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?

Upvotes: 1

Related Questions