Browser freezes when try to call a JS function along with submission of a form.

Question

I have form in my view like following

  1 <div>
  2   <% form_tag facebook_user_path do %>
  3     <label>Use my photo and name from facebook?</label><br />
  4     <%= check_box_tag 'use_name_and_photo', 'yes', true %>
  5     <img src="<%= @user.pic %>" /><% @user.name %>
  6 
  7     <%= submit_tag "Finish", :id => "use_name_and_photo_submit" %>
  8   <% end %>
  9 </div>

I have attached some JS handlers using Jquery to this form.

  1 var fb = {
  2   extendedPermissions: function () {
  3     $("#use_name_and_photo_submit").click(function (event) {
  4       FB.Connect.showPermissionDialog("email,read_stream,publish_stream", function (perms) {
  5         if (!perms) {
  6           alert("You have to grant facebook extended permissions to further browse the application.");
  7         } else {
  8           $("form").submit(function () {
  9             $.post($(this).attr("action"), $(this).serialize(), null, "script");
 10           });
 11         }
 12       });
 13       event.preventDefault();
 14       return false;
 15     });
 16   }
 17 };
 18 
 19 $(document).ready(function () {
 20   fb.extendedPermissions();
 21 });

What I want is that when the user clicks on the "Finish" button, he is prompted for the facebook permissions dialogue and when he gives the permissions, the form is submitted to FacebookUsersController.

Right now when I click the "Finish" button, facebook permissions dialogue is initiated but before I am prompted for the actual permission submission window, the browser freezes. Just like I have pressed Esc during the process. In fact status bar of the browser says "Stopped".

Any help is highly appreciated.