2010-02-23 21 views
5

Tengo una tabla de datos con los campos de búsqueda. Quiero que se invoque un método en el bean de respaldo cuando se presiona la tecla ENTER, así como también la DataTable que se debe volver a generar.JSF invoque el método de bean de respaldo y vuelva a generar componentes en la tecla ENTRAR

Mi enfoque hasta ahora solo funciona en IE 6 y 7, no en FF. Esta es la inputText:

<h:inputText 
value="#{applicantProductListBean.applicantNameFilterValue}" 
id="applicantNameFilterValue" onkeypress="submitByEnter(event)"> 
</h:inputText> 

y este es el método de Javascript invoco:

function submitByEnter(e){ 
if(e.keyCode==13){ 
     // alert("Enter was pressed"); 
     e.returnValue=false; 
     e.cancel=true; 
     document.getElementById("applicantProductListForm:refreshButton").click(); 
} 
} 

Como se puede ver, el método de Javascript hace clic en el botón Actualizar, que existe en la página:

<a4j:commandButton value="Refresh" id="refreshButton" 
action="#{applicantProductListBean.refreshData}" 
image="/images/icons/refresh48x48.gif" 
reRender="table, scroller"> 
</a4j:commandButton> 

El método refreshData no devuelve nada. Como dije antes, esto solo funciona en IE 6 e IE 7.

¿Alguien sabe por qué no funciona en FF?

Una alternativa que estaba considerando era HotKey, que de hecho puede detectar el evento de ENTER, pero solo puede invocar Javascript, por lo que no es apropiado.

¿Es la forma correcta de hacerlo a través de RichFaces o JSF sin formato?

¡Salud!

ACTUALIZACIÓN:

modificado ligeramente la respuesta por BalusC, el guión que funciona es:

if (event.preventDefault) { 
// Firefox 
event.preventDefault(); 
} else { 
// IE 
event.returnValue = false; 
} 

Respuesta

4

Trate de reemplazar el bloque de JS por:

function submitByEnter(e){ 
    if (e.keyCode == 13) { 
     e.preventDefault(); 
     document.getElementById("applicantProductListForm:refreshButton").click(); 
    } 
} 

o mejor,

function submitByEnter(e){ 
    if (e.keyCode == 13) { 
     document.getElementById("applicantProductListForm:refreshButton").click(); 
     return false; 
    } else { 
     return true; 
    } 
} 

y de onkeypress por

onkeypress="return submitByEnter(event)" 

Si eso no funciona la entrada, ejecute el depurador de JS Firebug para ver si el código JS se comporta como se esperaba.

+0

El primero funcionó. ¡Gracias hombre! –

+0

De nada. Sin embargo, no funcionará en navegadores (muy) antiguos. Pruébelo en todos los navegadores que se supone que debe admitir. – BalusC

+0

Hice una actualización (verifico si preventDefault existe y lo llamo o establezco returnValue en falso). Lo probé en IE6, IE7, FF. –

0

Siguiendo funcionó para mí:

<h:panelGrid onkeypress="searchByEnterAndReturn(event)"> 
    <b:aCustomComponent value="#{evolutionBackingAction.value}" id="someID"/> 
</h:panelGrid> 

<a4j:commandButton value="Search Now" action="search" id="searchButton"/> 

<script type="text/javascript"> 
    function searchByEnterAndReturn(e){ 
     if(e.keyCode==13){ 
      document.getElementById("generalForm:pageHeader:searchButton").click(); 
     } 
    } 
</script> 

Esto funciona, pero para encontrar el ID de mi botón de búsqueda que tenía que buscar a través del código fuente de mi página como el propio Identificación del searchButton no se puede conocer !

Pude haber hecho esto en el componente custom pero tengo control sobre el código fuente de este componente y el método onkeypress no está implementado.

Cuestiones relacionadas