Getting a value from a function with Javascript

Question

I have 2 functions: 1 checks that the user is logged in, and if he does - it calls for second function to get his userID. For now I'm just testing it with alert, to see if I do get the parameter.

This is the first function:

//Checking if the user is logged in or not
$(function(){
$.getJSON("inc/API.php", {command : "getUserName"},
    function(result){
        if(result==null){
            $("#divGreeting").html("Hello, guest!");
            $("#divLogin").hide();
            $("#divUserOption").hide();
            $("#divConnectOption").show();
        }
        else {
            alert(getUserID(result));
            $("#divGreeting").html("Hello, "+result+"!");
            $("#divHeader").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
            $("#divUserOption").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
            $("#divConnectOption").hide();
            $("#divLogin").hide();
            $("#divUserOption").fadeIn(300);
        }
    });
});

And this is the second function, the one that should return the userID:

function getUserID(){
$.getJSON("inc/API.php",
{
    command : "getUserID"
},
function(result){
    alert(result);
    return result;
});
}

The alert of the first function is undefined, while the alert of the second does have the userID. How come I can't return it's value to the first function? Why do I get `undefined?

Thank you!`

Quentin · Accepted Answer · 2012-04-09 14:12:51Z

0

Ajax is asynchronous. You can't return a value from it.

What are are trying to do is akin to:

function foo() {
    $('button').click(function () { return 1; });
}
var not_one = foo();

In this example, the value is not returned until the button is clicked (and it isn't the return value of foo anyway). With Ajax, the value is not returned until the HTTP response arrives.

You have to process the data in the callback function and not try to return to the calling function.

answered Apr 9, 2012 at 14:12

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Igal Over a year ago

I tried to use callback, but guess did it wrong. I tried it like that:

function getUserID(callback){ 	$.getJSON("inc/API.php", 	{ 		command : "getUserID" 	}, 	function(result){ 		alert(result); 		callback(result); 	}); }

but still undefined. What am I doing wrong? Thank you!

nathanjosiah · Accepted Answer · 2012-04-09 15:05:29Z

0

Try this:

//Checking if the user is logged in or not
$(function(){
$.getJSON("inc/API.php", {command : "getUserName"},
    function(result){
        if(result==null){
            $("#divGreeting").html("Hello, guest!");
            $("#divLogin").hide();
            $("#divUserOption").hide();
            $("#divConnectOption").show();
        }
        else {
            getUserID(function(result) {
                $("#divGreeting").html("Hello, "+result+"!");
                $("#divHeader").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
                $("#divUserOption").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
                $("#divConnectOption").hide();
                $("#divLogin").hide();
                $("#divUserOption").fadeIn(300);
            });
        }
    });
});

and then your getUserID function:

function getUserID(callback){
    $.getJSON("inc/API.php",
    {
        command : "getUserID"
    },
    callback
}

EDIT

You said that you would need to use the username in a string concatenation context :

"Hello "+getUserName()+"!"

however, if it has to make an AJAX request every time, this is not possible unless a blocking,syncronous call is being used which is not a good practice at all. If you store the username in a variable when the page loads, you can just use the variable. if you want to still use a function that requests it every time it's used, it would have to be done something like this:

function getUserName(callback) {
    $.getJSON("inc/API.php", {command : "getUserName"}, callback);
}

getUserName(function(result){
    //do username processing here
});

edited Apr 9, 2012 at 15:05

answered Apr 9, 2012 at 14:29

nathanjosiah

4,4594 gold badges38 silver badges47 bronze badges

8 Comments

Igal Over a year ago

Well, it's close... Now this part getUserID(function(result) { $("#divGreeting").html("Hello, "+result+"!"); is kinda messed up, it used to get result from this part $.getJSON("inc/API.php", {command : "getUserName"}, function(result) and to display a UserName, but now it displays the userID. How can I get both the UserName and the userID? Thank you!

Igal Over a year ago

forgot to mention, that eventually the userName code should look something like that: <a href='edituser.html?userID='"+getUserID()+"'>"+result(displays the userName here)+"</a>

nathanjosiah Over a year ago

it would have to be done in the same way as what i have in my answer, all ajax calls must be asynchronous so that type of string concatenation will not work with AJAX unless you are using synchronous calls, which is completely unacceptable

Igal Over a year ago

@nanathanjosiah I'm not sure I'm following... Do you mean I should make another function to get the user name? Then how would I still call for it? I'm really confused now...

Igal Over a year ago

These functions are called every time the page of the site is loaded. I'm trying to make some tests with it, but still can't make this thing work, to have both the userName and the userID...

|

Collectives™ on Stack Overflow

Getting a value from a function with Javascript

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related