Facebook javascript FB.ui request hangs on IE11 and Firefox

Question

I'm trying to use a facebook UI request dialog for selecting a friend. This works absolutely fine in safari and Chrome but in firefox and IE11 (Not tested lower versions yet) it continuously hangs with the loading animation.

function pickFriend(ev)
{
     FB.ui(
     {
          method: "apprequests",
          message: "Choose a friend.",
          max_recipients: 1,
          title:"Invite a friend"
     },sendMessage);
     ev.preventDefault();
}

$("#element").click(pickFriend);

I then tried calling the function directly in the console to ensure that it wasn't my implementation that was the problem, and i got the same result with it hanging with the loading animation. I then tried different display options and i can get it too work in popup mode but for me this is not very elegant and i would far prefer it to work in iframe mode the same way it does in safari and chrome.

Has anyone else been experiencing this issue? If so is there a reason for this and is ther a fix?

I'm thinking that this maybe something that is entirely down to facebook to fix which would leave no other option but to run in popup mode if i want to keep browser compatibility.

Answer 1

In IE11 (and node) the javascript engine can get hung up on long operations. The recommended work around is utilizing "setImmediate", so for your example:

function pickFriend(ev)
{
 ev.preventDefault();

 setImmediate(FB.ui
    , {
       method: "apprequests",
       message: "Choose a friend.",
       max_recipients: 1,
       title:"Invite a friend"
    }
    , sendMessage
 );
}

$("#element").click(pickFriend);

Also, make sure your "sendMessage" variable is scoped properly and not undefined or null.

Syntax

var immediateID = setImmediate(func, [param1, param2, ...]);
var immediateID = setImmediate(func);

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window.setImmediate