First of all, instead of the two calls- /me/groups
and /me
(for gender) - you can use just a single API - /me?fields=gender,groups
The FB.api
calls are asynchronous. So you have to proceed after the success callback is received. To do that, you can follow this structure-
loginButton.on('click', function(e) {
e.preventDefault();
FB.login(function(response) {
var gender;
var events = [];
if (response.status === 'connected') {
userID = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
GetUserDetails(); //
} else {
$.mobile.pageContainer.pagecontainer('change' , '#login');
}
},{ scope: "email , user_groups , user_events" });
});
function GetDetails(){
FB.api('/me?fields=gender,groups' ,function(res) {
userId = res.id;
gender = res.gender;
for(var i = 0 ; i < res.groups.data.length ; i++){
events.push(res.groups.data[i].name);
$('#facebookGroups').append('<input type="radio" id="' + res.groups.data[i].name + '"/>' + '<label for="' + res.groups.data[i].name + '">' + res.data[i].name + '</label>').trigger('create');
}
console.log(events);
console.log(gender);
SendToAjax(userID, gender, events);
});
}
function SendToAjax(userID, gender, events){
....
// your ajax call here
....
}