Difference in behaviour between javascript click() and user click on a button using JSF

Question

I have a form which, when the button gets clicked by a user, redirects to another page, but when I simulate the click with javascript, the redirect fails. Tha ajax calls are exactly the same (except for the javax.faces.ViewState, but have different results.

The form looks something like:

<h:form id="form" onkeypress="trapEnter(event);">
    <h:outputText value="Number" />
    <h:inputText value="#{form.number}" />

    <a4j:commandButton id="act" value="Go" action="#{form.go}" />
</h:form>

The javascript function:

function trapEnter(evt) {
  // cut out to save space

  if (keycode == 13) {
    document.getElementById('form:act').click()
    return false;
  } else {
    return true;
  }
}

When I enter 3 into the text input box and click Go, the page is redirected as expected to the target returned by #{form.go}.

When I enter 3 into the text input box and press enter, #{form.go} is called correctly but the page is NOT redirected.

In both cases form.go is called correctly and returns the correct value for the redirection. Could anyone tell me why the javascript click() does not work, and if I'm doing something completely wrong, please tell me how to do it right.

I'm using Firefox 3.5 if that makes a difference.

Thanks.

Answer 1

return false; prevents from redirection.

Answer 2

The a4j:commandButton generates a button element with a bunch of JavaScript to fire an ajaxical request. Your functional requirement however ("redirect page") can be as good done with a "plain vanilla" h:commandButton. So I would use that instead.

You however don't need to return true or false from the keypress. Rewrite your function as follows:

function trapEnter(event) {
    if (event.keyCode == 13) document.getElementById('form:act').click();
}

That's all (yes, detecting the enter key is browser independent).

Answer 3

I never did find out why this didn't work. As far as I know, it still doesn't work.

However, after asking the same question in the JBoss community forum, there is a different way to achieve this in richfaces:

<rich:hotKey selector="#form" key="return" handler="document.getElementById('form:act').click();"/>

this is included in the page to which it applies. This works.