Set focus on drop down list

Question

_{Tuesday, August 28, 2007 10:39 PM}

I'm sure this should be easy, but I can't seem to do it... I have an asp.net page with a number of controls on it, including a pair of drop down lists (fed into by a cascading drop down extender) and a couple of updatepanels. I want the page to automatically set focus to one of the drop down lists whenever the page is updated (either full page load, or partial async post back).

I tried adding the following code to the Page_Load handler, but it bombed.

string script = @"
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(PageLoadingHandler);

function PageLoadingHandler(sender, args) {
    $get('ddlTarget').focus();
    return;
}
";

ScriptManager.RegisterStartupScript(this, this.GetType(), "focusCells", script, true);

Perhaps this is completely the wrong approach.

I also tried the obvious thing of putting a few ddlTarget.Focus(); statements in the ASP.NET code - this didn't work either. 

Can anyone suggest a better way?

Thanks,

Nick.
 

All replies (11)

_{Thursday, August 30, 2007 10:08 PM ✅Answered}

Well, I'd recommend you try a "setTimeout" with 0 as the time to wait... sometimes JavaScript simply needs to wait "0 seconds" for things: setTimeout($get('ddlTarget').focus, 250); If that doesn't work out... then 1000 (1 second) might be good :)

Can you mark your post above as the "answer" so I know this thread is resolved?

Thanks,

_{Wednesday, August 29, 2007 12:00 AM}

ScriptManager.RegisterStartupScript(this, this.GetType(),
    "MyAlertyCode", "alert('Hello');", true);

(well, instead of "alert('hello')" you could do your blah.focus() code).

_{Wednesday, August 29, 2007 12:25 AM}

Err, that's exactly what my code does...

_{Wednesday, August 29, 2007 4:02 AM}

hi,

use instead the pageload event instead of the pageLoading event.. ie:

string script = @"Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoadedHandler);
function PageLoadedHandler (sender, args){
  $get("dropDownId").focus();
 
  return;
}";

hth

<hints id="hah_hints"></hints>

_{Wednesday, August 29, 2007 7:14 AM}

Err, that's exactly what my code does...

- Close enough... it could be a "timing" thing...

Change: $get('ddlTarget').focus();

Into: setTimeout($get('ddlTarget').focus, 250);

And see if that helps.

_{Wednesday, August 29, 2007 11:30 PM}

Looking into this a bit further - I think I have a more basic problem.

It would appear that the $get() function isn't actually finding the control. The name I pass (ddlTarget) is the name set for the drop down box in ASP.NET markup. A few (possibly) complicating factors are that the page is a master / content page (the drop down is on the content page, as is the javascript to focus), and there are a couple of UpdatePanels on the page. Also, I am using the cascading drop down extender to control the content of the target drop down list.

Is there anything special I need to do to in naming the control to make sure the $get() function does its thing?

Thanks,

Nick.

_{Thursday, August 30, 2007 12:25 AM}

hi,

 the problem of having a control inside a control(s) which implements INamingContainer, it automatically makes sure that your control id once rendered is unique (hence the funcky ctl$somecontrolContainer$controlId id). you can use instead the server controls ClientId:

 string script = @"Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);

function PageLoadedHandler(sender, args) {
    $get{'" + yourServerControl.ClientID + "'} ";

which will give the $get js function the correct/rendered id of the control

hth 

_{Thursday, August 30, 2007 7:34 AM}

the problem of having a control inside a control(s) which implements INamingContainer, it automatically makes sure that your control id once rendered is unique (hence the funcky ctl$somecontrolContainer$controlId id). you can use instead the server controls ClientId:

- Yeah, that's right on... "$get" is basically a shortcut for "document.getElementById" which requires the unique, client id (meaning if you view source and you see <mycontrol id="what$ever">).

_{Thursday, August 30, 2007 8:06 PM}

And that sorted it nicely. I must say, I was a bit surprised that it worked, as I had previously tried using the client id ("what$ever") explicitly, but that didn't work. Never mind.

Now I just have a timing problem - because the cascading drop down extender takes some time to do its thing, I am finding it hard to time the focus() call correctly. But I reckon I can sort that one.

Thanks

Nick.

_{Thursday, August 30, 2007 10:15 PM}

Fair enough - I'll mark it as answered. I haven't had much luck with timeouts of either 250 or 1000. But I'll keep trying...

_{Tuesday, November 27, 2007 9:20 PM}

Try this:

ScriptManager1.SetFocus(ServerControlID)