Facebook Connect does not process jQuery ajax call after successful login

I've got the following script:

    <script>
        window.fbAsyncInit = function () {
            FB.init({ appId: '<%: Facebook.FacebookApplication.Current.AppId %>',
                status: true,
                cookie: true,
                xfbml: true,
                oauth: true
            });

            function FBLogin() {
                FB.login(function (response) {
                    if (response.authResponse) {                            
                        ConnectFacebookUser(response.authResponse.accessToken);
                    } else {
                        alert('User cancelled login or did not fully authorize.');
                    }
                }, { scope: 'email' });
            }

            $('#fb-button').live('click', function (e) {
                FBLogin();

                e.preventDefault();
            });

            function ConnectFacebookUser(at) {
                var postdata = "at=" + at;
                alert('This is the access token : ' + at);

                $.ajax({
                    type: "POST",
                    dataType: "json", // what data type to expect from the server
                    url: "/FBConnect.ashx",
                    data: postdata,
                    success: function (data) {
                        // do nothing
                        alert('all good');
                    },
                    error: function (xhr, status, error) {
                        alert('error occured in FBConnect.ashx');
                    }
                });

                alert('finished');
            }
        };

        (function () {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        } ());

    </script>

And for the html fragment:

    <a href="#" id="fb-button">Login with facebook</a>
    <div id="fb-root"></div>

When the link is clicked, a popup window for facebook shows up and when i enter my login details,开发者_开发问答 i only see an alert to say "This is the access token..." but the rest of the code don't get processed. If I click the "login with facebook" link one more time, then everything gets processed as normal.

What could be the problem?

It works for me. I get the message 'this is the acccess code' and then i get a 'finished' alert. Check your Chrome debugger tools to look for any script errors that may be occuring silently.

Check out https://github.com/xocialhost/jquery.xocialCore.js/blob/master/jquery.xocialCore.js to see a jQuery specific way of doing this. One thing I noticed is that the jQuery click function when calling the FB.login was triggering the popup blocker in a few browsers I was testing with. I set this up to work around that issue but it's also a way to add a callback that is run properly during the init sequence.