Ajax doesn't send all of data

Question

I have the problem with my request. Look at this code

logInWithFacebook = function() {
FB.login(function(response) {
  if (response.authResponse) {
     FB.api('/me', {fields: 'name,email,location,picture'},function(userInfo) {

         FB.api('/me/picture?type=normal', function (response) {
            userInfo.photo = response.data.url; // what's wrong with that?
          });

          if(userInfo.location)
          {
            var location = userInfo.location.name.split(",");
            userInfo.location = location[0];
          }

        $.ajax({
            data:userInfo,
            type:"POST",
            url:"/login/facebook-loginexecute",
            dataType: "json",
            beforeSend: function() {
            console.log(userInfo); // everything is showing
            },
            success: function(result) {

            }
        });         
    });
  } 
},{scope: 'public_profile,email,user_location'});
return false;

};

So, after the send data (in this case "userinfo") through ajax, PHP function print_r - return everything without element's $_POST - photo. I don't know why? '

Answer 1

My guess is that FB.api call is asynchronous, so you fire it in the background and then fire your own ajax call before FB.api success callback is executed.

Move your ajax call inside of the FB.api callback:

logInWithFacebook = function() {
    FB.login(function(response) {
        if (response.authResponse) {
            FB.api('/me', {
                fields: 'name,email,location,picture'
            }, function(userInfo) {

                FB.api('/me/picture?type=normal', function(response) {
                    userInfo.photo = response.data.url; // what's wrong with that?

                    if (userInfo.location) {
                        var location = userInfo.location.name.split(",");
                        userInfo.location = location[0];
                    }

                    $.ajax({
                        data: userInfo,
                        type: "POST",
                        url: "/login/facebook-loginexecute",
                        dataType: "json",
                        beforeSend: function() {
                            console.log(userInfo); // everything is showing
                        },
                        success: function(result) {

                        }
                    });

                });

            });
        }
    }, {
        scope: 'public_profile,email,user_location'
    });
    return false;
};

As to why is it showing in the console, the console probably maintains a reference to the object, and by the time you look at it, the initial request has been completed.