Javascript not running on Facebook iframe

Question

Javascript not running on Facebook iframe

2.1k views Asked by Santosh Ghimire At 19 December 2013 at 18:10

I have a django project which is intended for a facebook application. In the project, the invite friends module runs fine in localhost!

Runs fine on localhost

But while it is loaded in facebook application, the javascript responsible for displaying the friends list doesn't work. Although the libraries are properly loaded.

Javascript doesnot run on facebook app

I don't know why it is so. May be some iframe problem. Here is the javascript code

<script type="text/javascript"> 
window.fbAsyncInit = function() {
    FB.init({appId: '460948667348013', cookie: true});

    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
         FB.api('/me', function(response) {
           // alert('Your name is ' + response.name);
           console.log('Your name is ' + response.name);
          init();
         });
      } else if (response.status === 'not_authorized') {
        alert('the user is logged in to Facebook, but has not authenticated your app');
      } else {
        alert('the user is not logged in to Facebook.');
      }
     });  
}
    function init() {
      FB.api('/me', function(response) {
          $("#username").html("<img src='https://graph.facebook.com/" + response.id + "/picture'/><div>" + response.name + "</div>");       
          $("#jfmfs-container").jfmfs({ 
              max_selected: 15, 
              max_selected_message: "{0} of {1} selected",
              friend_fields: "id,name,last_name",
              pre_selected_friends: [1014025367],
              exclude_friends: [1211122344, 610526078],
              sorter: function(a, b) {
                var x = a.last_name.toLowerCase();
                var y = b.last_name.toLowerCase();
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
              }
          });
          $("#jfmfs-container").bind("jfmfs.friendload.finished", function() { 
              window.console && console.log("finished loading!"); 
          });
          $("#jfmfs-container").bind("jfmfs.selection.changed", function(e, data) { 
              window.console && console.log("changed", data);
          });                     

          $("#logged-out-status").hide();
          $("#show-friends").show();
      });
    }              

    $("#show-friends").live("click", function() {
        var friendSelector = $("#jfmfs-container").data('jfmfs');             
        $("#selected-friends").html(friendSelector.getSelectedIds().join(', ')); 
    });                  
    function sendRequest() {
       var friendSelector = $("#jfmfs-container").data('jfmfs');
       var sendUIDs = friendSelector.getSelectedIds().join(', '); 
       // Use FB.ui to send the Request(s)
       FB.ui({method: 'apprequests',
         to: sendUIDs,
         title: 'My Great Invite',
         message: 'Check out this Awesome App!',
       }, callback);
     }
     function callback(response) {
        // alert('callback called');
       var friendSelector = $("#jfmfs-container").data('jfmfs');
       var sendUIDs = friendSelector.getSelectedIds().join(','); 
       var uids = sendUIDs.split(',');
       var query = '';
       for(i=0;i<uids.length;i++){
        if(i==0){
            query =  query + 'to[' + i + ']=' + uids[i];
        }
        else{
        query =  query + '&to[' + i + ']=' + uids[i];
        }
       }
       console.log(query);
       if(response){
        // alert('successful');
        window.location.assign("/?"+ query)
       }
       else{
        alert('failure');
       }

     }

  </script>

Please help ! I am stuck with this problem.