Migrating <script>...</script> to .js file fails

Question

I've gotten oAuth code to work inside tags in HTML5. When moving it to a .js file and calling the file, I get errors. I've tried copying the format of working js files (app.js) but I cant seem to get it to work. Here's the code:

oAuth.js

var Facebook = function() {
    function mygetLoginStatus() {
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                mygetProfileData();
            } else {
                FB.login();
            }
        });
    };

    function mygetProfileData() {
        FB.api('/me', {
            fields: 'first_name, last_name, email, picture, work'
        }, function(response) {
            document.getElementById('firstname').value = response.first_name;
        });
    };
    return {
        init: function() {
            window.fbAsyncInit = function() {
                FB.init({
                    appId: '[redacted]',
                    xfbml: true,
                    status: true,
                    version: 'v2.4'
                });
            };

            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) {
                    return;
                }
                js = d.createElement(s);
                js.id = id;
                js.src = "//connect.facebook.net/en_US/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            mygetLoginStatus();
            mygetProfileData();
        },
    };
}();

registration.html

<script type="text/javascript" src="assets/js/oAuth.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
...
<script type="text/javascript">
    jQuery(document).ready(function() {
        App.init();
        Facebook.init();
    });
</script>

Console:

Uncaught ReferenceError: FB is not defined
mygetLoginStatus @ oAuth.js:12
Facebook.init @ oAuth.js:60
(anonymous function) @ registration.event:441
m.Callbacks.j @ jquery.min.js:2
m.Callbacks.k.fireWith @ jquery.min.js:2
m.extend.ready @ jquery.min.js:2
J @ jquery.min.js:2

What am I doing wrong? These are the same types of errors I got when initially writing the code inside HTML so I know it seems like a scope error of some sort.

Where is FB variable defined? You are just using it inside oauth.js but it's not declared anywhere. If it is declared in app.js, you should include that file first. — MarcoReni
– MarcoReni, Commented Sep 2, 2015 at 17:28
Make sure your <script>s are in the right order. The one that defines FB needs to come before oAuth.js. — gen_Eric
– gen_Eric, Commented Sep 2, 2015 at 17:31

Vihar Chokshi · Accepted Answer · 2015-09-02 21:01:29Z

I figured this out. FB had to be defined inside the return stanza to be available to the other functions. This was a scope issue. The main logic of the program is not perfect yet, but documenting this for others.

var Facebook = function () {

 return {
    init: function() {
        window.fbAsyncInit = function() {
          FB.init({
            appId      : '[redacted]',
            xfbml      : true,
            status     : true,
            version    : 'v2.4'
          });
        };

       (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    },
    getLoginStatus: function() {
            FB.getLoginStatus(function(response) {
                    if (response.status === 'connected') {
                    //console.log('Logged in.');
                            getProfileData();
                    }
                    else {
                            FB.login();
                    }
            });

    },
    getProfileData: function() {
    //console.log('Welcome!  Fetching your information.... ');
            FB.api('/me',{fields: 'first_name, last_name, email, picture, work'}, function(response) {
                    document.getElementById('firstname').value = response.first_name; 
            });
    }
  };
}();

Collectives™ on Stack Overflow

Migrating <script>...</script> to .js file fails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related