2009-04-20 27 views
3

この作業を行う方法を理解しようとすると、私は狂ってしまいました。ajaxコールでロードされたDOMに入力フィールドをフォーカスできません

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

変更ハンドラが発射された最初の時間は、それはAjaxの更新を行い、テキストボックスがフォーカスされます。コードは、おおよそのように見えます。

ただし、それ以降の変更では、引き続きajaxの更新が行われますが、テキストボックスの再フォーカスは行われません。

onDropDownChangedにある場合は、ajax呼び出しの前に$("#updatePanel").empty()を追加しました。テキストボックスには常にフォーカスが当てられます。問題は、フォーム全体が1秒間消えてしまい、醜いフラッシュが発生することです。 Ajaxがこのようなことをすると仮定すると、私が使いたい回避策ではありません。

+1

あなたが担当しているHTMLのビットだけでなく、どのようなHTMLがajax呼び出しによって読み込まれているのでしょうか? –

答えて

6

それはうまくいくようですが、コールバックが呼び出されるまでにDOMが更新されないのだろうかと思います。遅れを導入することが役立つかどうかを知りたいかもしれません。ページのHTMLと何の負荷を介して返される含め

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

()これが動作しない場合は参考になります。

+0

これは私の推測でもありましたが、ドキュメントには記載されていませんが。 HTMLを見ることは確かにそれを整理するのに役立ちます。 –

+0

遅延を0に設定しても、遅延を設定する必要があります。必要なのは、「innerHTML」で挿入されたコンテンツをDOMが利用できるように、呼び出しを「延期」することだけです。 – savetheclocktower

4

私はIE6とIE7で同様の問題がありましたが、setTimeout()は信頼できる解決策ではありませんでした。時にはうまくいきました。それは何らかのマシンではまったく動作しませんでしたが、とにかく500msの値は完全に任意です。 focus()の機能は、もちろんFirefoxとChromeの両方でタイムアウトを起こすことなく、期待どおりに機能しました。

私のソリューションは、IEのために二回focus()を呼び出すことだった:私は最初の場所で意図したものでした

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

今。

+0

これは本当に私のために働く..おかげで仲間 –

+0

男、あなたは私の一日を作った:D –

関連する問題