Javascript not running on Facebook iframe

https://stackoverflow.com/questions/20688741

19-09-2022
|

Question

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.