Populate JS Variable With Data from AJAX Request

[Brian Miller]

Is it possible to put some data from an AJAX Post request into a JavaScript variable?

Consider the following example:

var

myVar

= "Hello World";

alert(

myVar

);

Modifying the example above, I'd like to retrieve the text "Hello World" from a page on my server (http://localhost/text.txt).

Can I do something like, assuming I'm using jQuery:

var

myVar

;

$.post(

"/text.txt"

, function(data){

myVar

= data;

},"html");

alert(

myVar

);

[AdamLC]

Yep should work fine :)

[Killer_Z]

With that code you'll need synchronous requests to make it work. Otherwise you'll have printed "undefined" before the ajax call ends.

You should simply put the alert in the callback function to make it work fine.

[Brian Miller]

How do I make it "synchronous"?

Also, I dont want to alert the data, I just need it to populate the var.

I'm only alerting it to show the var has been populated.

[Killer_Z]

The callback you made is correct, the var'll be populated at the end of the call. If you need to process the var after it's been populated you must assure the order of execution of your code. Making the ajax request synchronous is "ugly", the best way is to make proper use of the callback functions.

But if you really want you must simply put:

$.ajaxSetup({
async:false})
[/CODE]

before the $.post.

[Brian Miller]

Try running this bit of code.

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script>

$(function(){

var

myVar

=

"

xxx

"

;

$.ajaxSetup({async:false});

$.post(

"./text.txt"

, function(data){

myVar

= data},

"html"

);

alert(

myVar

);

});

</script>

I see the "XXX" text in the alert, and not the content from my "text.txt" file.

The content of my "text.txt" file is as follows:

Hello World

[Killer_Z]

Yeah because the alert is shown before the $.post completed. Try this:

$.post("text.txt", function(data) {
	myVar = data;
	alert(myVar);
});
[/CODE]

And you'll have the alert with "Hello World" (or a connection/timeout error).

Edit:

I tried the syncronous version (with a get method and jquery 1.6.2) and it works. My simple hfs http server doesn't like post :)

[Brian Miller]

But how do I populate that global var with the Ajax data? That's all I want.

I'm only using alert() to show the variable is populated.

[Killer_Z]

  On 30/11/2011 at 10:38, Brian Miller said:

But how do I populate that global var with the Ajax data? That's all I want.

I'm only using alert() to show the variable is populated.

Like I (and AdamLC) said your code is fine to populate the value. At the very end of the ajax request you'll have your value ("Hello World") in the global variable. I just wanted to add that IF you must do something with your value you must assure that you wait for the ajax post to complete. Your alert doesn't wait, that's why it shows "xxx"

[winlonghorn]

  On 30/11/2011 at 10:43, Killer_Z said:

Like I (and AdamLC) said your code is fine to populate the value. At the very end of the ajax request you'll have your value ("Hello World") in the global variable. I just wanted to add that IF you must do something with your value you must assure that you wait for the ajax post to complete. Your alert doesn't wait, that's why it shows "xxx"

That will only happen with Asynchronous calls correct? Meaning, it behaves that way because the processing of the rest of your code continues while it grabs the data in the background right? :)

[Killer_Z]

Yes :) , quoting from: http://api.jquery.com/jQuery.ajax/

  Quote

The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made. Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.

[winlonghorn]

  On 30/11/2011 at 10:52, Killer_Z said:

Yes :) , quoting from: http://api.jquery.com/jQuery.ajax/

Thank you. Just checking. It is never safe to make assumptions. lol. :)

[Killer_Z]

  On 30/11/2011 at 10:53, winlonghorn said:

Thank you. Just checking. It is never safe to make assumptions. lol. :)

You're welcome. Javascript is quite tricky :) it is supposed to be single threaded but often there're some fun situations, that's one of the reason jquery use callback for everything (like the immediate events).

[Brian Miller]

Thanks guys. I think I see the problem. The Global Var does get populated, but in FireFox only. It doesn't on Chrome.

Here's some new code:

<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<script>
var globalVar = "xxx";

alert(
"STARTING:\n\n" +
"Global Var: " + globalVar
);

$(document).ready(function(){
$.ajaxSetup({async:false});

$.post(
  './text.txt',
  function(data){
   showVar(data)
  },
  "html"
);

function showVar(localVar){
  alert(
   "AFTER AJAX REQUEST:\n\n" +
   "Global Var: " + globalVar + "\n" +
   "Local Var: "  + localVar
  );
}
});
</script>
[/CODE]

Anyone want to hazard a guess why Chrome is not wanting to play nice?

[Calculator]

Where exactly are you assigning the results of the AJAX request to "globalVar"? I don't see such an assignment in your snippet. Also, this is not a browser issue: you're just doing it wrong.

Seriously though, you need to grasp the concept of asynchronous programming in JavaScript.

&lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script>;script type="text/javascript"&gt;
$(function(){
// 1) Declare the variable
var myVar = "xxx";
// myVar === "xxx"

// 2) Fire up the AJAX request
//   This call returns immediately (hence "asynchronous")
$.post("./text.txt", function(data) {
   // 4) The request has completed and the results are retrieved
   //	 This callback gets called
   // 5) The variable gets overwritten
   myVar = data;
   // myVar === "Hello world"
   // 6) This is the point where you can do stuff
   //	 with the new data in the variable
   doStuff();
}, "html");

// 3) Continue after firing the request
//   The request is still running at this point
alert("Right after firing the request, myVar is still "+myVar);
// myVar === "xxx"
});

function doStuff() {
	alert("Now that the request has completed, the new value of myVar is "+myVar);
}
&lt;/script&gt;

Yes, you can make synchronous AJAX requests by setting "async" to false. I've never come across a need to do this: you can always use callbacks (or the new deferred object in jQuery) as the next part of your program flow.

[Brian Miller]

From your example, the doStuff() function never gets fired in Google Chrome.

So, how do you do the deferred object in jQuery?