Невозможно сфокусировать поле ввода в 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(); 
} 

Теперь, когда сделал то, что я намеревался в первую очередь.