Access of javascript global variable fails

Question

I'm doing my first mobile app with jquery mobile and phonegap/cordova. All goes great until I create the pages themselves, but as soon as I want to access some variables i access from the remote server, it fails at specific places. I already tried about 30 variations re-writing the same code again - literally spent 4 hours already on outputting a simple var -, but no success, and i simply pulling my remaining hair out now.

Here's my code snip

I have an html file, a js file and a php on serverside, outputting a json answer

php response i get:

{"item":{"ID":"1","fname":"Kris","lname":"Nagy","email":"myemail@email.com","password":"abc123","role":"1","practice":"0","address":"","city":"","zip":"","phone":""}}

login.js

var userName;
function getUser() {
 $.getJSON( "http://myserver.com/getuser.php?email=myemail@email.com&pass=absc123", function( json ) {
 console.log( "JSON Data: " + json.item.fname );
 console.log( "JSON Data: " + json.item.email );
 // testing if i have the correct data, console outputs the rigth values

 userName =  = json.item.fname;
 window.userName = json.item.fname;
 //trying to assign value to variable

 console.log( "Variable data" + window.userName );
 // testing if i have the correct data stored, console outputs the right value
  });
 }
 getUser();  
 console.log( "test outside function" + window.userName );
 //gives back undefined

index.html (here I'm just trying to access the variable, sure i have the full html, including the js, jquery and all necessities)

 <script>
 getUser(); //outputs the values to console
 console.log( "test in html" + window.userName ); /*/gives back undefined
 </script>

As i need some vars in my html to work with, how do i achieve to be able to output them in the html. This example tries to make some kind of login, but my question is more abotu the variables, as i want to understand them. In my understanding I have global variables with the window. call, but it seems everything but to be global, and I'll need to work with variables all along the app, so its vital i understand them. Though as you see it seems i miss a point, so any help is so appreciated. I know how to work with php, but as the final product needs to run on cordova, I'm limited to html/js on the client side, and javascript is not my strength (yet).

That's how works ajax by default, asynchronously. Please read: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — A. Wolff, Mar 25 '14 at 10:35
Thank you for the link. However it doesn't solve my actual problem that i have a few variables I must access immediately. What would be the solution for calling the server for the user's details, then access it anytime? e.g in my app i want to make the side panel to be slid out with user's name, etc. Isn't there any way of outputting vars like getUser(userName) or so? That's the grail am looking to find, but don't know how to actually achieve this kind of code. Sorry if my question wasn't straightforward enough. — K. N, Mar 25 '14 at 10:58
But you simply cannot access it 'immediately', only after request has set value — A. Wolff, Mar 25 '14 at 10:59
sorry my previous comment was sent pressing enter before i finished it, am new to stackoverflow yet :) — K. N, Mar 25 '14 at 11:01
You have to set all your logic using `window.userName` inside the success callback of `$.getJSON()` method. You can of course call any function using this value inside this callback. FYI, you could redesign your code to use promise interface instead (make it usually more readable) as: `var userName; function getUser() { return $.getJSON(...); } getUser().done(function(){ console.log( "test outside function" + window.userName ); });` Now all your logic could go inside `.done()` callback — A. Wolff, Mar 25 '14 at 11:07
Thank you, this solution looks promising, will try it and update the thread if i succeed — K. N, Mar 25 '14 at 11:14
You're a star, it works! Thank you so much. How do I up your rep in comments? — K. N, Mar 25 '14 at 11:17

score 1 · Accepted Answer · answered Mar 25 '14 at 11:18

1

You could return the promise interface exposed by ajax request from your function:

var userName;

function getUser() {
    return $.getJSON(...);
}
getUser().done(function () {
    console.log("test outside function" + window.userName);
});

answered Mar 25 '14 at 11:18

A. Wolff

72,298
9
84
139

score 0 · Answer 2 · answered Mar 25 '14 at 10:34

You cannot access userName outside the JSON success callback, since you are assigning teh value only in success callback of an asynchronous method.

console.log( "test outside function" + window.userName ); // it wont work

If you still want to access immediately, make synchronous call by setting one of ajax settings async:false, but the overall goal of ajax is lost

Access of javascript global variable fails

2 Answers2