Question

I have a input text like this:

<h:inputText value="#{someValue}">
   <f:ajax event="change" listener="#{someMethod}" render="someDataTable"/>
</h:inputText>

I have a data table like this:

<h:dataTable value="#{someList}" var="anyVar" id="someDataTable">
    some things
</h:dataTable>

When I change the text in the input text, the change is not hapenning immediately, rather I have to click on the page on anything to get the required result in the data table.

Does anyone know how to solve this problem?

Answer 1

On HTML input text elements, the HTML DOM change event is only fired when the element’s value has been changed and the element loses focus (i.e. the blur event has been fired as well). Clicking anywhere else on the page or tabbing to next element would fire the blur event. So the described symptoms perfectly matches the specified behaviour.

You’re most probably interested in the keyup event.

<f:ajax event="keyup" ... />

Keep in mind that this fires the Ajax request on every keystroke which is not necessarily cheap. You might want to add a delay of ~200ms.

<f:ajax event="keyup" delay="200" ... />

See also:

• What values can I pass to the event attribute of the f:ajax tag?