Geek Answers Handbook

JQuery UI Dialog + ASP.NET Text Fields + Focus

Problem

I am using the jQuery UI dialog box to show a dialog box with some ASP.NET text fields and a button in it. However, since jQuery moves the div for the dialog box outside the form, I need to move it back to the form again (see this one to find out why), so ASP.NET still works. This move causes a problem when the field does not receive focus when called.

If you look at the pattern below, the line marked as line B should set the focus, however the line marked with line A breaks this. If I comment on line A, this will work. No matter where I move line B (to the dialog, line A, etc.), it still cannot set the focus.

Having set the focus, I mean that the cursor is in the text box that is blinking, ready for type.

Q uestion How to set 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();
    });
+5
source share
4 answers

It works in FF, but not in IE7. I found out 2 works around. If you do not refer to the text field by name, but by position or for any reason, if you set focus twice.

First:

$("input:text:second").focus();

The second:

$("#TextBox2").focus().focus();
+3
source

Try using it setTimeout("$('#TextBox2').focus();",100);, sometimes it takes a few seconds for the dialog and other methods of the jQuery user interface to complete the tasks that we assign with the code.

, . .

+7

I think the problem is that you move the popup and call focus before the dialog is fully created.

Try using the dialog box instead open:

$(document).ready(function() {
  $("#popup").dialog({
    open: function(){
      $(this).parent().appendTo(jQuery("form:first"));
      $("#TextBox2").focus();
    }
  });
});
+4
source

you can also classify the text field, since asp.net manages control identifiers to avoid name conflicts.

$(".mytextbox").focus();

as an example .. this, of course, defeats the goal of semantics, but semantics don't mix well with web forms.

+1
source

More articles:


All Articles