javascript function return not working.

Question

Hey,

I have a problem returning a variable in my function, the below script works fine:

function sessionStatus(){
    $(document).ready(function(){
     $.getJSON(scriptRoot+"sessionStatus.php",function(status){
      alert(status);
     });
    });
}

sessionStatus();

Bet when I try the following I get a message box with the message "undefined":

function sessionStatus(){
    $(document).ready(function(){
     $.getJSON(scriptRoot+"sessionStatus.php",function(status){
      return status;
     });
    });
}
alert(sessionStatus());

This is really bugging me, I just can't seem to see what I've done wrong.

Answer 1

Your function sessionStatus() doesn't return anything, hence the alert says undefined.

All the function does is set thing up for the AJAX call to happen once the page loads - nothing actually happens within sessionStatus() that could be returned.

The code in function(status) { ...} doesn't get run until the AJAX call to the server returns a value, and that AJAX call doesn't get sent until the page loads.

You ought to read up on what $.getJSON() and $(document).ready() actually do, because you're going to continue to get confusing behaviour until you understand them properly.

Answer 2

Your sessionStatus() function never returns anything. It sets a function to run later, and that function returns something, but that's not anything to do with sessionStatus()

Answer 3

You're returning a value when the document ready event is done. Where is your value supposed to go? The jQuery object doesn't know what to do with it.

Answer 4

The function sessionStatus just sets up the event listener for $(document).ready() and then returns without returning a value. That's the undefined you see.

Later when $(document).ready() fires it calls the ajax which if it succeeds returns the status, but nothing is receiving that status.

Answer 5

function sessionStatusCallback(status) { alert(status); }

function sessionStatus(){
    $(document).ready(function(){
        $.getJSON(scriptRoot+"sessionStatus.php",function(status){
                sessionStatusCallback(status);
        });
    });
}

sessionStatus();

Your function is being called asynchronously -- actually after two asynchronous calls, made via .ready() and .getJSON(). In such a case there is no available return value, instead you have to use a callback, as in the above, to process the response.

Though I should note that the function passed to getJSON in the above already is a callback. You could change that function definition to just be "sessionStatusCallback" and it would call the above callback once the JSON was ready, and you could continue to process there. Or...continue your processing in the current callback (it's a matter of style whether to use a function reference or declare the anonymous function right there in the .getJSON() call)

Answer 6

Functions should never be included in a jQuery(document).ready function. Separate them, so you don´t have side effects you don´t want to have. How do you want to call the session status? And witch function should get the return value?

Answer 7

There are two things you should know:

1: the JSON thing is asynchronous, so the function call to sessionStatus could already be done when the JSON is still being fetched. The following would work:

function sessionStatus(callback){
    $(document).ready(function(){
        $.getJSON(scriptRoot + "sessionStatus.php", function(status){
                callback(status);
        });
    });
}
sessionStatus(function(s){alert(s);});

or rather:

function sessionStatus(callback){
    $(document).ready(function(){
        $.getJSON(scriptRoot + "sessionStatus.php", callback);
    });
}
sessionStatus(function(s){alert(s);});

2: even when it would be synchronous, you are only giving a return value from the inner function, so the sessionStatus would return nothing. Check out this code (not related to your JSON thing):

function do() {
    var x = 0;
    (function(){
       x = 2;
    })();
    return x;
}

or:

function do() {
    var x = (function(){
       return 2;
    })();
    return x;
}

Both return 2. Hopefully this explains a bit.