Question

I have a javascript for facebook integration, and it works perfectly when I include it written in the body of my HTML. Now, since I have quite a few pages that all require the facebook auth script, I saved it in a seperate file and include it in all my pages, but when I do this, the script seems to cease to function. Here’s the code

//Ajax XML Loaders
var xmlhttp;
function loadXMLDoc(url,cfunc)
    {
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}
window.fbAsyncInit = function() {
    FB.init({appId: 'xxxxxx', status: true, cookie: true, xfbml: true});

    /* All the events registered */
    FB.Event.subscribe('auth.login', function(response) {
        // do something with response
        login();
    });
    FB.Event.subscribe('auth.logout', function(response) {
        // do something with response
        logout();
    });

    FB.getLoginStatus(function(response) {
        if (response.session) {
            // logged in and connected user, someone you know
        }
    });
};
(function() {
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());
function login(){
    //Fire the PHP Facebook Auth Script
    loadXMLDoc('http://www.website.com/scripts/php/facebook_auth.php',function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            if (xmlhttp.responseText == "Success"){
                window.location.reload;
            }else{
                window.location = "http://www.website.com/login_failed.php";    
            }
        }
    });
}
function fblogoutClick(){
    FB.logout(function(response) {

    }); 
}
function logout(){
    //Fire the PHP Logout Script
    loadXMLDoc('http://www.website.com/scripts/php/logout_exec.php',function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            if (xmlhttp.responseText == "Success"){
                window.location.reload;
            }else{
                window.location = "http://www.website.com/logout_failed.php";   
            }
        }
    });
}

And I put this in the head:

<script src="http://www.thehoppr.com/scripts/javascript/facebook_login.js"></script>

The FB login event is fired by a button click, but like I said, if I include this within the body, it works fine, but if I save it externally and load it in the head or body, it ceases to function and I’m not exactly sure why.

Answer 1

The only reason this would happen would be if the code were not included properly. In terms of the code actually getting run, there’s no significant difference between

<script>
foo();
</script>

and

<script src="foo.js"></script>

…where foo.js contains foo();, provided those tags are in the same place. If you put the inline tag in one place, but you put the external reference tag elsewhere, then of course there’s a difference in terms of where the script is.

(There are differences, most notably that the browser doesn’t have to read through the script code looking for the ending script tag, which is a Good Thing; but that probably isn’t relevant here.)

The most common errors including scripts are:

• Not including the ending </script> tag.
• Trying to use a self-closing tag, e.g. <script src="foo.js" /> which does not work.
• Getting the path to the JavaScript file wrong. 🙂