0

So basically, I'm working on a Facebook login flow for my website. It's fairly basic, but giving me some problems. The issue appears that the click observer is only working some of the time. A hard refresh will typically fix the problem. The following is my JS code used to get into it...

function fb_login(login_destination)
{
    FB.login(function(response) {
        if (response.authResponse) {
            var fb_auth_token = response.authResponse.accessToken;
            var fb_user_id = response.authResponse.userID;  
            var url =  '/login/ajax/fb_login.php?fb_auth_token=' + fb_auth_token + '&fb_user_id=' + fb_user_id + '&fb_login=' + login_destination;
            window.location = url;
        }
    }, {scope: 'email,user_about_me'});
}

document.observe("dom:loaded", load_fb);
function load_fb()
{
    window.fbAsyncInit = function(){
        FB.init({
            appId      : 'ID'    
            status     : true, 
            cookie     : true,
            xfbml      : true,
            oauth      : true
        });
    }; 

    $('fb_connect').observe('click',function(event){
        var login_destination = $('fb_connect').getAttribute('dest');
        fb_login(login_destination);
    });
}

The only symptom appears to be that it simply will not respond to clicks on certain page loads. The ID I'm using is tied directly to the image itself. I'm curious if anyone has ran into this and knows how to fix it. Thanks.

Austin DeVinney
  • 273
  • 3
  • 12

2 Answers2

0

I've run into this before. I ended up using timer to start the initialization script as a backup. The function sets a variable and exits if it has already run. Ugly, but effective.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • After further testing, it appears to always get into the method fb_login, so I'm lead to believe that perhaps the library isn't getting pulled in correctly every time. However, when checking the page load, it is definitely fetching the FB JS SDK even when the problem exists. So, I'm lead to believe it is both getting bound properly and the JS library is getting pulled in every time. A very confusing bug. – Austin DeVinney Sep 06 '12 at 16:41
0

So, I wound up fixing this. The code effectively got changed to this....

function load_fb()
{   
    var d = document;
    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);

Basically I'm just now waiting to bring in the FB JS SDK until after the page load (reference earlier code for this to make sense). It doesn't have anything to do with scriptaculous.

Austin DeVinney
  • 273
  • 3
  • 12