Can't focus input field in DOM loaded with ajax call

Question

I have gone insane trying to figure out how to make this work. Code looks roughly like:

function onDropDownChanged() {
  $("#updatePanel").load(
    "myUrl",
    { id: $("#myDropDown option:selected").val() },
    onPanelLoaded
  );
}
function onPanelLoaded() {
  $("#theTextInput").focus();
}
$(document).ready(function() {
  $("#myDropDown").change(onDropDownChanged);
}

The first time the change handler is fired, it does the ajax update, and the text box is focused.

However, on subsequent changes, it continues to do the ajax update, but the text box is never focused again.

I found that if in onDropDownChanged, I added $("#updatePanel").empty() before the ajax call, the text box would always get focused. The problem with that is the entire form disappears for a second, causing an ugly flash. Given ajax is supposed to make things like this nice, it's not a workaround I want to use.

Answer 1

It seems like it should work, but I wonder if the DOM isn't updated by the time the callback is invoked. You might want to see if introducing a delay helps.

function onPanelLoaded() {
     setTimeout( function() { $("#theTextInput").focus(); }, 500 );
}

Including the HTML on the page and what is returned via load() would be helpful if this doesn't work.

Answer 2

Thank You tvanfosson ! I've had exactly the same problem !!! I couldn't focus on a ajax loaded input (the input was contained into some html code served to the ajax load() ).

Answer 3

Tvanfosson's advice solved a similar problem for me, thank you :)

Answer 4

I had a similar problem with IE6 and IE7, but setTimeout() was not a reliable solution. Sometimes it worked, sometimes it did not. It didn't work on some machines at all, and the 500ms value was completely arbitrary anyway. The focus() function worked exactly as expected without any timeout in both Firefox and Chrome, of course.

My solution was to call focus() twice for IE:

function onPanelLoaded() { var panel = $('#theTextInput'); panel.focus(); panel.focus(); }

Now THAT did what I intended in the first place.