The code below successfully triggers the FB.api() function when the button named “button2” is clicked however I am unable to trigger it from the button named “button1” event though I have verified that the button is triggering it’s click handler. If anyone could tell me what I’m doing wrong I’d appreciate it.
window.fbAsyncInit = function() {
FB.init({ appId: 'xxxxxxxxxxxxxxx',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
function updateButton(response) {
var button1 = document.getElementById('subbtn');;
var button2 = document.getElementById('fb-auth');
button1.onclick = function(response){
alert("Button1 Clicked");
FB.api('/me', function(response) {
alert("FB.api Triggered");
});
};
if (response.authResponse) {
//user is already logged in and connected
var userInfo = document.getElementById('user-info');
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
button2.innerHTML = 'Logout';
});
button2.onclick = function() {
FB.logout(function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML="";
});
};
} else {
//user is not connected to your app or logged out
button2.innerHTML = 'Login';
button2.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
alert("FB.api triggered");
var userInfo = document.getElementById('user-info');
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture" style="margin-right:5px"/>' + response.name;
});
} else {
//user cancelled login or did not grant authorization
}
}, {scope:'email'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(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);
}());
It looks like the difference between the two onclicks is that you are calling FB.login before you call FB.api in the button2 click event, but not in the button1 event:
vs
I’m guessing if you click button2 and then button1, that button1’s handler works?