I just had an unbelievable debugging experience with our facebook connect site:
One of our pages includes three main elements:- a link to post to your facebook stream
- an link to update part of the page with AJAX
- an input form
I had the page working fine in all sane browsers, and went to verify that everything was kosher on internet explorer. You're really not going to believe this.
- open the facebook "post to your stream" dialog box
- post the message (or close the box, didn't matter)
- click the AJAX link
I tested the page in every different way, and those steps had to be performed in exactly that order to reproduce the effect, but it consistently disabled all text areas on the page. Debugging javascript in internet explorer isn't the most enjoyable experience - the IE javascript debugger is a major downgrade from firebug. I tried using firebug lite, but the above sequence actually DISABLED THE FIREBUG CONSOLE!?!?
The Solution:The hack I worked out to fix this mess is more unbelievable than the problem. I noticed that if I clicked on one of the input fields after opening the facebook dialog box, the form fields wouldn't be disabled after subsequently making the ajax call. It really didn't matter which form field i clicked, as long as it happened between closing the facebook dialog and making the ajax call. So I stuck a hidden form in the top of the page:
<div style="overflow: hidden; width: 1px; height: 1px;">
<form>
<textarea id="ajax_fix"></textarea>
</form>
</div>
Then, I appended the following callback to FB.Connect.streamPublish (which gets called after the dialog is closed):
if ($("ajax_fix")) {$("ajax_fix").focus();}; . . . and problem solved. I still don't believe it. It's clearly a ridiculous hack. I just don't know whether to feel dirty for putting it in or triumphant for getting it to work.