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>