CODEWITHSUNDEEP
javascriptajaxjqueryasynchronous
user1726343
user1726343

Reputation:

AJAX not updating variable

jQuery

I am making an AJAX request that updates the value of a variable (foo) with a response from the server. Here is the code I am using:

//## My variable ##

var foo = "";


//## Send request ##

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});


//## Alert updated variable ##

alert(foo);

The problem is that the value of foo remains an empty string. I know that this is not a problem with the server-side script, since I would either get an error alert or at the very least the string "New value:".

Here is a JSFiddle that demonstrates the problem: http://jsfiddle.net/GGDX7/

Why is the value of foo not changing?

Pure JS

I am making an AJAX request that updates the value of a variable (foo) with a response from the server. Here is the code I am using:

//## Compatibility ##

var myRequest;
if (window.XMLHttpRequest) {
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}


//## My variable ##

var foo = "";


//## Response handler ##

myRequest.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status === 200) {
            foo = "New value:" + this.responseText;
        } else {
            alert('There was a problem with the request.');
        }
    }
};


//## Send request ##

myRequest.open('GET', "response.php");
myRequest.send();


//## Alert updated variable ##

alert(foo);

The problem is that the value of foo stays an empty string. I know that this is not a problem with the server-side script, since I would either get an error alert or at the very least the string "New value:".

Here is a JSFiddle that demonstrates the problem: http://jsfiddle.net/wkwjh/

Why is the value of foo not changing?

Upvotes: 5

Views: 5851

Answers (5)

Denys Séguret
Denys Séguret

Reputation: 382102

At the point when you alert the value of foo, the success handler has not yet fired. Since it is the success handler that reassigns the variable, its value remains an empty string.

The timeline of events looks something like this:

  1. foo is assigned the empty string
  2. AJAX request created and dispatched.
  3. The value of foo is alerted. (Note that foo hasn't changed yet)
  4. AJAX request completes.
  5. foo = "New value:" + this.responseText;

Since we want to alert the value of foo after it has changed, the solution is to put the alert in the success callback.

Now it will be executed after the AJAX response is received.

Upvotes: 5

Carlos Nuñez
Carlos Nuñez

Reputation: 470

Your alert is executing before the Ajax request is finished. Try the following. var foo = "";

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;

        alert(foo);
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});

Upvotes: 0

Polyana Fontes
Polyana Fontes

Reputation: 3216

The issue is simple...

alert(foo);

will execute while the request is being processed and foo will not be altered yet.

if you do :

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;
        alert(foo);
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});

You'll see that it's working as intended

Upvotes: 0

Felix Guo
Felix Guo

Reputation: 2708

The problem is that your alert is being fired before the request has been completed. Try this code:

I've put the alert into the callback function of the $.ajax, which means that the callback function will only be fired after the .ajax part has been completed. This will transfer the new data over, set the variable, THEN alert it, rather than calling the request and alerting the variable at the same time. 

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;
        alert(foo);
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});

Upvotes: 2

Pointy
Pointy

Reputation: 413712

The (first) A in "AJAX" stands for asynchronous. The transaction does not happen immediately, and so your alert() happens quite some time before the remote call completes.

Upvotes: 3

Related Questions