Facebook Connect showPermissionDialog callback fires before user can even see the dialog

Question

I'm doing a Facebook Connect integration for a site and when the user logs in, I need to ask for some permissions so I use FB.Connect.showPermissionDialog. I use its callback to see if permissions were granted. If they are granted, I want to submit the form. Here's what my code looks like:

$("#form3").live("submit", function() {
 FB.Connect.showPermissionDialog('email, offline_access', function(perms) {
    if (!perms) {
     location.href="http://www.mysite.com/logout/";
  return false;
   } else {
   save_session();
   }
 });
});

The problem is that the form submits before the user can even see the permission dialog. Has anyone seen this before?

Answer 1

Very recently I did the same thing. Move the button out of the form. Move it in such a way that clicking on it wont submit the form. Now use following code to ask for extended permissions and then submit the form.

  1 var fb = {
  2   extendedPermissions: function () {
  3     $("#submit_button").click(function (event) {
  4       FB.Connect.showPermissionDialog("email,read_stream,publish_stream", function (perms) {
  6         if (!perms) {
  7           location.href="http://www.mysite.com/logout/";
  8         } else {
  9           $.post('/url_to_post_the_form', $('#form3').serialize(), function (data, textResponse) {
 10             window.location.replace(data.redirect);
 11           }, "json");
 12         }
 13       });
 14     });
 15   }
 16 };

Line 4 makes sure that on click of the button, permission dialog is shown to the user.

Line 7 If the user does not give the permission, he redirected to logout.

Line 9 else you post the form content to the place where you want it to submit. Make sure it returns a redirect URL in JSON format where you want your user to land when he gives you the permission and when form content are posted successfully.

Line 10 actually redirects the user to the URL which came as JSON in last AJAX post request.

HTH