CODEWITHSUNDEEP
javascriptdomcordovafacebook-loginionic-framework
Claudiu S
Claudiu S

Reputation: 1637

phonegap-facebook-plugin on WebApp, JS error

I am building a Ionic based mobile application and I am using the phonegap-facebook-plugin to login with facebook. I have managed to install the plugin on both android and ios and it works. However, while trying to use it for the webapp, I am having dificulties making it work. I will outline my setup then outline the error:

login.html

<div id="fb-root"></div>
<div class="event listening button" ng-click="login();">Login with Facebook</div>

app.js

angular.module('app', ['ionic', 'app.controllers', 'app.services'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    //First page
    .state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'
    });

controllers.js

angular.module('app.controllers', [])

.controller('LoginCtrl', function($scope){

    $scope.login = function () {
        if (!window.cordova) {
            var appId = prompt("Enter FB Application ID", "");
            facebookConnectPlugin.browserInit(appId);
        }
        facebookConnectPlugin.login( ["email"], 
            function (res) {                                                
                //if successfull                                            
                if (JSON.stringify(response['authResponse']['accessToken']) != null){
                    alert("True");
                    $location.path('/home').replace();
                }
                else{
                    //redirect back
                }

            },
            function (res) { 
                //if error
                alert(JSON.stringify(response)) 
            }
        );
    }
});

In the facebookConnectPlugin.js, I have a line of code which gets the error "Uncaught TypeError: Cannot read property 'appendChild' of null", specifically Line 174:

document.getElementById('fb-root').appendChild(e);

I know this must be due to the DOM, but can't seem to get past it.

Any help would be great, thanks :)

Upvotes: 1

Views: 1505

Answers (2)

Dexter Rustia
Dexter Rustia

Reputation: 1

maybe this answer is too late but for those having the same issue. I'm facing this problem in ionic framework adding the following to the platform(ios,android,browser) that having the issue fixed the problem for me.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your_app_id',
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();
  };

  (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'));
</script>

Hope this helps!

Upvotes: 0

Aneesh
Aneesh

Reputation: 599

In index.html, try to place all the script tags at the end (just before the closing body tag). This should solve the problem.

Upvotes: 3

Related Questions