jQuery (cross domain) .getJSON, store response in re-usable variable

Question

I want to get the IP from the current user and send it along with an AJAX POST to a PHP file. Which means I need to re-use the variable I get in the response from the IP .getJSON request.

Script 1: I found this handy snippet on snipt:

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
    alert( "Your ip: " + data.ip);
});

Script 1 works and gives an alert dialog with your IP.

Script 2: I converted script 1 into this:

 var ipAppspot;
 $.getJSON("http://jsonip.appspot.com?callback=?",function(data){
         ipAppspot = data.ip;
 });
 alert(ipAppspot);

As I understand that not declaring the 'var' keyword in front of a variable makes it avaible to all scopes even outside the function (global). Though I guess that should work if script 2 wouldn't be a Cross-domain request maybe, but in this case it gives an alert dialog with 'undifined' So this example won't work though

On Stackoverflow there is another question jQuery-storing-ajax-response-into-global-variable which deals with about the same problem.

And appending the solution they give I get the following.

Script 3: Appending the solution from the link

// https://stackoverflow.com/questions/905298/jquery-storing-ajax-response-into-global-variable
var ipStore = (function(){
    var ipAppspot;
    $.getJSON("http://jsonip.appspot.com?callback=?",function(data){ipAppspot = data.ip;});
    return {getIp : function()
    {
        if (ipAppspot) return ipAppspot;
        // else show some error that it isn't loaded yet;
    }};
})();

alert(ipStore.getIp());

Script 3 Gives the same problem as script 2, which is 'undefined'

Question: How can I re-use this variable in later uses in my script?

EDIT for Nick Cravers answer

var ipAppspot;
$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
  ipAppspot = data.ip;
  myFunc();       
});
function myFunc() {
  alert(ipAppspot);
}

by Nick Craver, which does in fact works.

function dataAuth(ip){      
    // collect data from form
    var usernameRaw = $('#feg-username').val();
    var passwordRaw = $('#feg-password').val();
    // phpFile is our back-endgine
    var phpFile = 'feg/back-endgine.php';
    // construct the JSON in a variable
    var dataConstruct   = "username=" + usernameRaw + "&password=" + passwordRaw + "&ip=" + ip;
    // start the AJAX 
    $.ajax({
       type: "POST",
       url: phpFile,
       dataType: "json",
       data: dataConstruct,
       success: function(msg){
         alert(msg);
       }
     });
} // END dataAuth

This is in my application, and I would use the function as such:

$('body').delegate('#feg-submit', 'click', function(){
    $(this).attr('disabled','disabled');
    console.log('submit button clicked');
    dataAuth(ipAppspot);
    return false
});

​So I would use the ipAppspot there, and I would need the IP for AJAX requests later on, is there any way I could implement it?

Answer 1

It's not a scoping issue, it's a timing issue, let's illustrate it with an example that does work, like this:

var ipAppspot;
$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
  ipAppspot = data.ip;
  myFunc();       
});
function myFunc() {
  alert(ipAppspot);
}

You can test it here. Notice it does alert your IP, so what's different here? You're not asking for the variable (by calling alert()) until the variable is populated, and this happens in the $.getJSON() callback. So the scope isn't an issue, but the fact that the callback runs later (when the response comes back) is an issue, just initiate whatever needs the data from the callback, since that's the first time the data's available.

Here's a more common example, passing the data directly to wherever it goes:

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
  myFunc(data.ip);
});
function myFunc(ipAppspot) {
  alert(ipAppspot);
}

Or, the short version:

$.getJSON("http://jsonip.appspot.com?callback=?", myFunc);
function myFunc(ipAppspot) {
  alert(ipAppspot);
}

Answer 2

Your alert occurs before the asyc operation has completed and therefore is undefined at that time. If you place the alert within the callback, you will find that it is (probably) correctly defined. If you want to assign and reuse the variable, don't attempt to do so until the callback has fired. Perhaps the logic that requires this value could be placed in a function that is called from the callback?

Answer 3

Ajax is asynchronous. Refactor so you do the conditionals in the callback.

That or make async false.