Facebook canvas: Uncaught TypeError: Cannot call method 'sort' of undefined

Question

I have a strange problem. My javascript code of multi-friend selector runs fine on my localhost but when I load it inside the canvas of my facebook app, it throws an error

Uncaught TypeError: Cannot call method 'sort' of undefined

at line 81 of all.js When I debug with the chrome developer tools on localhost, I can see the response object calling the sort method but in facebook app, the response object is the error object. Is there any thing wrong with my javascript? OR any specific task to do while loading in iframe on facebook?.

I have loaded the libraries in the following order:

    <script src="/static/interface/js/jquery.min.js"></script> 
  <script src="http://connect.facebook.net/en_US/all.js"></script>
        <script src="/static/interface/js/bootstrap.min.js"></script>
        <script src="/static/interface/js/jquery.facebook.multifriend.select.js"></script> 
        <link rel="stylesheet" href="/static/interface/css/jquery.facebook.multifriend.select.css"/> 

And here is the javascript code

<script> 


    FB.init({appId: '460948667348013', cookie: true});

    FB.getLoginStatus(function(response) {
        if (response.session) {
          init();
        } else {
          // no user session available, someone you dont know
        }
    });

    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');
       }

     }
window.onload = function() {
      init();
    };

  </script> 

Answer 1

if the code you inserted is all.js, it seems to me that it should come at the end of list of tags, so you have the FB api loaded.

additionally, since you are using jquery, why use

window.onload

when you can use

$(document).ready(function() {
    init();
});

?

alternatively, are you sure all of the other scripts are accessible as you are importing them? (i assume they are, but it doesn't hurt to check.)