Question

I succeed to integrate FBConnect in my application. Connection and register pages worked fine.

But since a while, when I click on facebook button, the events I had bound are not raise anymore.

<script src="http://connect.facebook.net/fr_FR/all.js" ></script>
<script type="text/javascript">
//console integration
if(typeof console !== 'object')
console = {};
if((typeof console.debug) !== 'function'){
    if(typeof opera === 'object'){ 
        console = {
            debug : function(){return opera.postError(arguments);},
            info : function(){this.debug('[INFO] ',arguments);},
            log : function(){this.debug('[LOG] ',arguments);}
        };
    }
    else{ 
        console = {
            debug : function(){return true;},
            info : function(){return true;},
            log : function(){return true;}
        };
    }
}

/**
 * Fonction called to init and manage FB Connection
 */
handleFacebook();
$('#fb-button').click(function(){
    alert('ok');
    fbGetLoginStatus();
});

/**
 * 
 */
function handleFacebook() {
    if(!window.fbApiInit) {
        FB.init({appId: 'myAppId', xfbml: true, cookie: true});
        fbApiInit = true;
    }
}

function fbGetLoginStatus() {
    FB.getLoginStatus(function(response) {
        onStatus(response); // once on page load
        FB.Event.subscribe('auth.statusChange', onStatus); // every status change
    });
}

/**
* This will be called once on page load, and every time the status changes.
*/
function onStatus(response) {
    console.info('onStatus', response);
    if (response.status == 'connected') {
        console.info('User logged in');
        if (response.perms) {
            console.info('User granted permissions');
        }else{
            console.info('User has not granted permissions');
        }
        getAccountInfo();
    } else {
        console.info('User is logged out');
    }
}

/**
* This assumes the user is logged out, and renders a login button.
*/
function showLoginButton() {
    var button = '<fb:login-button perms="email" />';
    $('#fb-login-button').html(button);
    FB.XFBML.parse(document.getElementById('fb-login-button'));
}

function getAccountInfo() {
    FB.api(
        {
        method: 'fql.query',
        query: 'SELECT username, first_name, last_name, uid, email, sex  FROM user WHERE uid='+FB.getUserID()
        },
        function(response) {
            console.info('API Callback', response);
            var user = response[0];

            $('#usernamefb').val(user.username);
            $('#mailfb').val(user.email);

            $('#facebook-connect-form').submit();
        }
    );
}
</script>
<div id="fb-login-button">
    <fb:login-button perms="email" id="fb-button" />
</div>
<form method="post" action="/facebook-connect" id="facebook-connect-form">
    <input type="hidden" id="usernamefb" name="usernamefb"/>
    <input type="hidden" id="mailfb" name="mailfb"/>
</form>

I notice that the alert function in the $(‘#fb-button’).click event is never called.
It is not showed here but I include jQuery library upper in my file.
Any idea ?

Thanks for your answers.

Answer 1

Facebook changed their button, and i didn’t find a way to bind click Events to it after their change.

I changed my Website to Subscribe to the FB Event on Load.
When you initialize FB you have to set the Option “status” to false to prevent an automatic Loginstatus-Check on init!

function fbInit() {
        window.fbAsyncInit = function () {
            FB.init({
                appId: 'XXX',
                status: false,
                cookie: true,
                xfbml: true
            });

            //auth.statusChange
            FB.Event.subscribe('auth.authResponseChange', function (response) {
                if (response.status.indexOf('connected') != -1) {
                    // the user is logged in and has authenticated your
                    // app, and response.authResponse supplies
                    // the user's ID, a valid access token, a signed
                    // request, and the time the access token 
                    // and signed request each expire
                    var uid = response.authResponse.userID;
                    var accessToken = response.authResponse.accessToken;

                    //Handle the access token
                    jQuery.ajax({
                        url: 'token_handler.ashx',
                        type: 'POST',
                        data: "accessToken=" + accessToken,
                        success: function (msg) {

                        }
                    });

                } else if (response.status.indexOf('not_authorized') != -1) {
                    // the user is logged in to Facebook, 
                    // but has not authenticated your app
                } else {
                    // the user isn't logged in to Facebook.
                }
            });
        };
    (function (d) {
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    } (document));
}