views:

727

answers:

1

I got a little problem here guys. I'm trying to implement the following scenario:
1- A user opens the home page and sees a list of other users and clicks to add one to his friend list.
2- I issue an Ajax request to a server resource to validate if the user is logged in, if so, I issue another ajax request to another server resource to actually add it to the user's friend list.
Sounds simple? Here's what I've done: I created a function "isLoggedIn" that will issue the first request to the server in order to determine if the user is logged in. I issue this request using jQuery.ajax method. Here's my function looks like:

function isLoggedIn() {

    $.ajax({
    async: "false",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "/isloggedin",
        success: function(jsonData) {
            alert("jsonData =" + jsonData.LoggedIn);
            return jsonData.LoggedIn;
        }
    });
}

The returned JSON is very simple, it looks like the following:

{ LoggedIn: true } or { LoggedIn : false }


Now this method, actually works and displays the alert correctly: "JsonData = true" if logged in, and "JsonData=false" if not logged in.
Up to this point there's no problem, the problem occurs when I try to call this method: I call it like so:

$(".friend_set .img").click(function() {
    debugger;
    if (isLoggedIn()) { 

        alert("alredy logged in");
        trackAsync();
        popupNum = 6;
    }
    else {
        alert("not logged in"); //always displays this message.
        popupNum = 1;
    }
    //centering with css

    centerPopup(popupNum);
    //load popup
    loadPopup(popupNum);
    return false;

});

Calling isLoggedIn always returns false, and it returns false before the ajax request finishes (because the message "jsonData = true" is displayed after the message "not logged in". I made sure that the request is NOT Asynchronous by stating async: false!
Apparently it's still working asynchronously, though. What am I missing here guys?

+8  A: 

You need async:false, not async:"false". (i.e. pass boolean false, not string "false").

Edit: also with async requests you need to return a value after the call to ajax, not inside your success handler:

function isLoggedIn() {
    var isLoggedIn;
    $.ajax({
        async: false,
        // ...
        success: function(jsonData) {
            isLoggedIn = jsonData.LoggedIn
        }
    });
    return isLoggedIn 
}
Roatin Marth
Tried both ways, still the method returns before even completing the ajax request.
Galilyou
@7alwagy: sorry, see my edit.
Roatin Marth
Great! It's working now, also the return outside the success handler is crucial as when I was trying to return inside the success handler the method always return false. It's pretty clear for me now why this happened. Obviously because the return is not chained through the outer method of the success handler. The return from the success handler returns out of the success handler, not the container method. Thanks a lot Roatin. That was quick. Winner!
Galilyou
Thanks bendewey! It's always jarring seeing someone edit my post (I keep forgetting about that feature), but thanks.
Roatin Marth