External Javascript Doesn't Interact with Button Clicks?

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.

Show us your <head> block when you include it as an external script. — glortho
– glortho, Commented Jun 15, 2011 at 18:54

T.J. Crowder · Accepted Answer · 2011-06-15 18:58:25Z

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. :-)

answered Jun 15, 2011 at 18:58

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Throttlehead Over a year ago

I added my header script tag above, when i browse to this link, it brings me right to the script so the path is correct. This is really weird

T.J. Crowder Over a year ago

@Jacob: Strange! And you're putting that exactly where you previously had the inline script tag? The only answer is to walk through with a debugger and figure out what's going wrong. But the script should certainly be getting loaded and run, nothing wrong with that script tag. So that suggests some other nuance...

Throttlehead Over a year ago

Well when the script is externalized, I get an error in the console around line 42, which is where it's appending the child to 'fb-root' I had a feeling that the way I was loading the facebook api was probably causing a problem when the script is externalized. I'm just going to put the login and logout functions in the external script and leave the facebook api loaders and that coded into every page's html.

Throttlehead Over a year ago

Apparently when the script is externalized, it's unable to append the loaded api to my <div id='fb-root'> element. So unless you guys know how I can work around it, i'm just going to leave the facebook code in every page, and just exernalize the functions that interact with my php.

T.J. Crowder Over a year ago

@Jacob: There's no reason why the script being in a separate file rather than inline would have any effect on its being able to add to a div on the page. Something else is going on.

|

diracdeltafunk · Accepted Answer · 2011-06-15 19:07:31Z

0

You have most likely not included the script correctly. did you use a self closing tag? (< />)

those are not allowed

answered Jun 15, 2011 at 19:07

diracdeltafunk

1,2042 gold badges11 silver badges26 bronze badges

Collectives™ on Stack Overflow

External Javascript Doesn't Interact with Button Clicks?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related