Form submit vs ajax execute="@form"

Question

I'm using JSF2.1.

What is the difference beetween execute="@form" and this.submit() in the code below?

<f:ajax execute="@form" render="@form"/>

and:

<h:form onkeypress="if (event.keyCode == 13) this.submit();">

The former seems to submit the values and re-render the form, while the latter causes a page refresh. Is there any way to use ajax when the enter key is pressed in the form? I'm trying to detect the enter key being pressed in an inputText box. I've tried things like this:

<h:inputText value="#{a.name}" >
  <f:ajax execute="@this" />
</h:inputText>

but this just causes the values to be submitted when you click on something else (after valueChange).

score 5 · Answer 1 · edited May 23 '17 at 12:13

In order to answer your question's title, the difference between them is that a form submit sends the whole form and reloads the view, while an ajax form execution also submits the whole form, but using an ajax request which can be used to render only a specific part of the view before response happens.

Regarding to your question content, the form submit by pressing the Enter key is implemented in the major browsers for single input forms. There's no need of javascripting the onkeypress event, as the browser will detect that and send the form by default.

So the next code piece has the same result for server side, either pressing the Send button or the Enter key: The value attribute being set. Note that in the second form, where the <h:inputText /> has an ajax behaviour, the h:outputText value is also refreshed (even not being specified a render attribute) when hitting the Enter key, that's because of the full submit request being prioritized over the ajax request and the whole page being reloaded. Only Google Chrome seems to tell about that conflict: httpError:The Http Transport returned a 0 status code. This is usually the result of mixing ajax and full requests.

Full request:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}" />
        <h:commandButton value="Send" />
    </h:form>
</body>
</html>

Ajax request:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}">
            <f:ajax />
        </h:inputText>
        <h:outputText value="Echo: #{bean.value}" />
    </h:form>
</body>
</html>

When the form has more than an input field you can use such a javascript verification for sending the form if there's no any submit button, using full submit request. If there's, doing that is unecessary.

Finally, if you want to perform an ajax request when hitting the key and update model values, use onkeypress attribute:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}"
            onkeypress="if (event.keyCode == 13) {onchange(); return false; }">
            <f:ajax render="echo" />
        </h:inputText>
        <h:inputText value="#{bean.value2}" />
        <h:outputText id="echo" value="Echo: #{bean.value}" />
    </h:form>
</body>
</html>

Remind that it's advisable to use a submit button for plain accessibility matters.

See also:

Form submit vs ajax execute="@form"

1 Answers1