CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
K. N
K. N

Reputation: 81

Access of javascript global variable fails

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":"[email protected]","password":"abc123","role":"1","practice":"0","address":"","city":"","zip":"","phone":""}}

login.js

var userName;
function getUser() {
 $.getJSON( "http://myserver.com/[email protected]&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).

Upvotes: 0

Views: 357

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

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

Upvotes: 1

Murali Murugesan
Murali Murugesan

Reputation: 22619

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

Upvotes: 0

Related Questions