Problem
I am using jQuery UI dialog to show a dialog box with some ASP.NET textboxes and a button in it. However as jQuery moves the div for the dialog box outside the form I need to re-move it back to the form myself (see this for details why), so that ASP.NET still works. This moving is causing a problem, where the field does not get focus if called.
If you look at the sample below the line labeled Line B should set the focus, however the line labeled line A breaks that. If I comment out line A it works. No matter where I move line B to (before dialog, line A etc...) it still fails to set focus.
By setting focus I mean the cursor is in the text box flashing ready to type.
Question how do I set the focus in this scenario?
Samples
HTML body sample
<body>
<form id="form1" runat="server">
<div id="popup">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
jQuery sample
$(document).ready(function() {
var dlg = $("#popup").dialog();
/*Line A*/ dlg.parent().appendTo(jQuery("form:first"));
/*Line B*/ $("#TextBox2").focus();
});