Componente personalizzato JSF che perde il focus di input su aggiornamento ajax

Question

Sto scrivendo un componente personalizzato a completamento automatico come esercizio di apprendimento con JSF 2.1.3. L'idea (che è probabilmente abbastanza familiare) è inserire del testo in e inserire il componente e presentare una casella di riepilogo con valori corrispondenti. L'idea è di avere un evento javascript keyup sull'input che chiama jsf.ajax.request() per aggiornare il componente. Finora ho un componente che posso includere come questo:

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

Questo rende HTML come questo:

<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> 

Il com.myco.ajaxRequest() funzione JavaScript (keyup) fa questo:

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

Quindi perché voglio ricostruire e rerender casella di riepilogo con i suggerimenti lista, sto ri-rendering del componente personalizzato 'myauto'. Specificando execute: 'myauto' viene eseguito il metodo decode() e posso ottenere il valore di input. Con specificando il rendering: 'myauto' i metodi encode ...() vengono eseguiti per rigenerare l'html.

Questo va tutto bene, ma poiché sto rendendo il genitore del componente myauto_input , perdo l'input focus ogni volta che si attiva l'evento keyup.

Se specifico qualcosa come il rendering: 'myauto_listbox' (Ho solo voglia di debba ripeterlo casella di riepilogo dopo tutto) il problema è che la codifica ...() metodi non eseguire, perché sono per il componente personalizzato nel suo complesso, non solo la listbox. E sarebbe in uno dei metodi encode ...() che ricostruisco la listbox contenente i suggerimenti.

Il componente estende UIInput e generare markup in un renderer separata (componentFamily = "javax.faces.Input") nel metodo encodeEnd() (quindi questo corre sempre dopo ogni convertitore in dotazione - non ancora implementato). Suppongo che che forzare l'attenzione da javascript sia un trucco orribile e da evitare.

Sono un po 'incerto su dove andare, ma ho il sospetto che quello che sto vedendo indica che mi sto avvicinando in questo modo nel modo sbagliato. Se qualcuno sarebbe abbastanza buono da indicarmi la giusta direzione, apprezzerei molto lo .

Answer 1

Ho trascorso un po 'di tempo alla ricerca in questo e il problema generale di perdere la concentrazione dopo un aggiornamento AJAX è abbastanza comune ed è descritta in Jim Driscoll di blog (vedi 'Keeping Focus').

Nel caso della mia componente personalizzato I (credo ...) devo aggiornare il componente personalizzato stessa, che è la madre di ingresso, quindi ho intenzione di perdere la concentrazione a seguito della ajax aggiornamento, e questo è solo il modo in cui è. Come tale ho visto cosa deve essere fatto per ripristinare lo stato attivo, e sembra che nella mia codifica di rendering devo semplicemente ripristinare focus, ma solo quando si risponde al POST inviato dall'evento onkeyup da jsf.ajax.request. Io uso jQuery e sto solo chiamando.focus() non è abbastanza perché devi anche portare la posizione del cursore alla fine di qualsiasi input esistente di . Questo codice qui sotto sembra funzionare bene:

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

(nota:.. .focus() messa a fuoco() clicca() necessari per IE8, proprio .focus() funziona su Chrome ...)

Quindi sembra che l'orribile hack abbia salvato la giornata. Mi chiedevo se ci sarebbe stata alcuna differenza se avessi usato le routine jQuery ajax piuttosto che la libreria jsf ajax ma Non credo che farebbe alcuna differenza.