2011-08-22 27 views
6

JSF 2.1.3での学習課題としてオートコンプリートカスタムコンポーネントを作成しています。 (おそらくかなり慣れ親しんでいる)考え方は、 にテキストを入力してコンポーネントを入力し、値が一致するリストボックスを表示することです。考え方は です。jsf.ajax.request() を呼び出してコンポーネントを更新する、入力にkeyup javascriptイベントを持たせることです。これまでのところ、私は のようにこれを含めることができるコンポーネントを持っている:JSFカスタムコンポーネントがajaxアップデートの入力フォーカスを失う

<mycc:autocomplete id="myauto" searchMethod="#{bean.doSearch}"/> 

これは、このようにHTMLをレンダリングする:

<span id="myauto"> 
    <input type="text" id="myauto_input" name="myauto_input" 
    onkeyup="com.myco.ajaxRequest(this, event)"/> 
    <select id="myauto_listbox" name="myauto_listbox"> 
    <option value="1st">First</option> 
    <option value="2nd">Second</option> 
    </select> 
</span> 

com.myco.ajaxRequest()JavaScript関数(keyUpイベント)がありませんこの:

jsf.ajax.request(comp, null, { 
       execute: 'myauto', 
       render: 'myauto' 
       }); 

は、だから私は リスト、私はカスタムコンポーネントのmyauto」を再レンダリングを再構築し、提案をリストボックスを再描画したいので。 execute: を 'myauto'に指定すると、decode()メソッドが実行され、入力値を取得できます。 レンダリング: 'myauto'を指定すると、encode ...()メソッドが実行され、htmlを に再生成します。

これはすべて問題ありませんが、myauto_input コンポーネントの親をレンダリングしているため、keyupイベントが発生するたびに入力フォーカスが失われます。

私は、レンダリングのようなものを指定した場合:「myauto_listbox」(私は本当にすべての後に、リストボックス再レンダリング したい)問題は、彼らがしているので、エンコード...()メソッド は、実行されないということですカスタムコンポーネント全体ではなく、 リストボックス。そして、それは私が 提案を含むリストボックスを再構築するencode ...()メソッドの1つにあります。

成分はUIInputを拡張し、私は(そうこの が常に供給される変換器の後に実行さ - 未実装)encodeEnd()メソッド内の別個のレンダラ (componentFamily =「javax.faces.Input」)でマークアップを生成します。私は JavaScriptスクリプトからのフォーカスを強制的に恐ろしいハックと避けられると思います。

私はちょっと分かりませんが、私はこれを見ていると思われます。 は、私が間違った方法でこれに近づいていることを示しています。誰でも が正しい方向に私を指すのに十分なのであれば、私は大きく に感謝します。私はこれと AJAX更新後フォーカスを失うことの一般的な問題を検討していくつかの時間を費やしてきた

答えて

1

はかなり一般的であり、(「フォーカスを維持する」 を参照してください)ジム・ドリスコルのblogに記載されています。

私のカスタムコンポーネントの場合(私は...)、入力の親であるカスタムコンポーネント 自体を更新する必要があるので、 ajaxの結果としてフォーカスを失うつもりですそれはちょうどその通りです。このように、フォーカスを復元するために行われた の必要性を見てきました。レンダラーのエンコードでは、入力にフォーカスを強制的に復元するだけですが、onkeyupイベントから送信されたPOSTに応答するときだけです。 jsf.ajax.request。私はjQueryを使用して呼び出します。フォーカス()は で十分ではありません。既存の 入力の最後にカーソル位置を取得する必要があるためです。このコードは、以下に動作するようです[OK]:

<script> 
    jQuery(function($){var cid='#myauto_input';$(cid).focus().focus().click();$(cid).val($(cid).val());}); 
</script> 

(注:Chromeで動作します()(フォーカス)(クリック)だけ.focus(、IE8のために必要).focus ...)

ひどいハックがその日を救ったように見える。もし私がjsf ajaxライブラリではなくむしろjQuery ajaxルーチンを使用したとしても、 の違いがあれば私は疑問に思った。 私はそれが何か変わるとは思わない。

関連する問題