Не удается сфокусировать поле ввода в DOM, загруженном вызовом ajax

Question

Я сошел с ума, пытаясь понять, как заставить это работать. Код выглядит примерно так:

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

При первом запуске обработчика изменений выполняется обновление ajax, и текстовое поле фокусируется.

Однако при последующих изменениях он продолжает обновлять ajax, но текстовое поле больше никогда не фокусируется.

Я обнаружил, что если в onDropDownChanged добавить $("#updatePanel").empty() перед вызовом ajax, текстовое поле всегда будет сфокусировано. Проблема в том, что вся форма исчезает на секунду, вызывая уродливую вспышку. Учитывая, что ajax должен делать такие вещи, это не обходной путь, который я хочу использовать.

Answer 1

Кажется, что это должно работать, но мне интересно, не обновляется ли DOM к моменту обратного вызова. Возможно, вы захотите узнать, помогает ли введение задержки.

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

Включение HTML-кода на страницу и того, что возвращается с помощью load (), будет полезно, если это не сработает.

Answer 2

У меня была похожая проблема с IE6 и IE7, но setTimeout() не было надежным решением. Иногда это работало, иногда нет. На некоторых машинах он вообще не работал, а значение 500 мс было совершенно произвольным. Функция focus() работала точно так же, как и ожидалось, без тайм-аута в Firefox и Chrome, конечно.

Мое решение состояло в том, чтобы позвонить focus() дважды для IE:

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

Теперь ЭТО сделало то, что я и задумал.