Ajax success not setting value of variable

Question

I have a simple ajax call on one of my views.

var countAnchors;

$.ajax({
    url: countUrl,
    method: "GET",
    data: @Model.InitialTrainingId,
    success: function (result) {
        console.log("result: ",result);
        countAnchors = result;
    },
    error: function (jqXHR) {
        console.log(jqXHR);
        alert("There was a problem");
    }
});

console.log("countAnchors: ",countAnchors);

When I run this, in the console I am seeing:

Why isn't countAnchors being assigned the value in the success function?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Taplar, May 21 '19 at 14:58

score 1 · Accepted Answer · answered May 21 '19 at 14:24

You can make a function ,so whenever response comes you can assign value to your variable like below:

var countAnchors=null;

  function result(r){
    countAnchors= r;//assigning value return
   console.log("countAnchors: ",countAnchors);
  }

    $.ajax({  
        type: "POST",  
        url: "readString.php",  
        data: { 'fn': filename },      
        success: function(response){
            result(response); //calling function
        },
       error: function (jqXHR) {
       console.log(jqXHR);
       alert("There was a problem");
      }
    });

Adrian · Answer 2 · 2019-05-21T14:30:19.303

Your log entries are giving you a hint.

Unless you specify otherwise, ajax calls will run asynchronously.

In this case, you are seeing in the log that your logging of the value of countAnchors happens before the ajax call has completed. Just because it was written earlier in the script block doesn't mean (in this case) that it's finished before the next part of the script block is executed.

I bet this will give you a value, and will return the two lines to the console log in the expected order:

var countAnchors;

$.ajax({
    url: countUrl,
    method: "GET",
    data: @Model.InitialTrainingId,
    success: function (result) {
        console.log("result: ",result);
        countAnchors = result;
        console.log("countAnchors: ",countAnchors);
        doSomething();
    },
    error: function (jqXHR) {
        console.log(jqXHR);
        alert("There was a problem");
    }
});

function doSomething()
{
    alert('countAnchors: ' + countAnchors);
}

EDIT: If you need to do something with the value of countAnchors, create a new javascript function and call it from the success function after countAnchors is set.

score 0 · Answer 3 · answered May 21 '19 at 14:18

0

Because

console.log("countAnchors: ",countAnchors);

run before success function and at this time 'countAnchors' is still undefined

answered May 21 '19 at 14:18

feihoa

477
4
10

So, how do I know if `countAnchors` is being assigned the correct value? How do I test that? – Grizzly May 21 '19 at 14:20
uhmm..you can check it right after console.log("result: ",result) I guess – feihoa May 21 '19 at 14:22
But the problem is that I am performing conditional statements based on the value of `countAnchors` outside of the ajax call that I posted in my question. So, if it doesn't have the correct value and only has `undefined`, then my conditional statements won't work as expected – Grizzly May 21 '19 at 14:24
You have to do it inside 'success' – feihoa May 21 '19 at 14:27

Ajax success not setting value of variable

3 Answers3