Question

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.