JSF invoke backing bean method and reRender components on ENTER key

Question

Hi,

I have a datatable with as search fields. I want a method on the backing bean to be invoked when ENTER key is pressed, as well as the DataTable to be re-rendered.

My approach so far only works in IE 6, and 7, not in FF. This is the inputText:

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

and this is the Javascript method I am invoking:

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

As you can see, the Javascript method clicks on the button refresh, which exists on the page:

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

The refreshData method does not return anything. As said before, this only works in IE 6 and IE 7.

Does anyone know why it does not work in FF?

An alternative I was considering was HotKey, which can indeed catch the event of ENTER, but it can only invoke Javascript, so it isn't appropriate.

Is the proper way to do this via RichFaces or plain JSF?

Cheers!

UPDATE:

Slightly modified the answer by BalusC, the script that works is:

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

Answer 1

Try replacing the JS block by:

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

or better,

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

and the input's onkeypress by

onkeypress="return submitByEnter(event)"

If that doesn't work, run the JS debugger of Firebug to see if JS code behaves as expected.

Answer 2

Following did work for me:

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

This works, but to find the ID of my search button I had to search through the source code of my page as the searchButton id itself couldn't be found!

I could have done this on the customComponent but I'm having control over the source code of this component and the onkeypress method is not implemented.