f:ajax by onchange event

Question

I have a special problem: I need to send a value to server by client onchange event without submiting the whole form. Is there some feature to do it?

I can handle the component by Javascript:

<h:inputText onchange= ...js... >

And I can send a value by ajax:

<f:ajax execute="name"/>

How to put it together?

---

It is solved, but I have another question:

What is processed sooner - Ajax handling of the event or JavaScript handling?

Answer 1

Easy, AJAX was designed for partial submits / updates that happen on the page. You just need to specify event attribute of <f:ajax> tag and let it be change , as you desire. As per partial form submit, specify ids of components to be updated on the server in tag's execute attribute. But as default value for execute of <f:ajax> is exactly @this (the component that fires the event), you can omit it altogether. Like so:

<h:inputText id="text" value="#{bean.text}">
    <f:ajax event="change"/>
</h:inputText>

This way, after JavaScript change event happens, your bean model will be updated behind the scenes via AJAX.

As of which event happens first question you need to understand that it is the JavaScript event that triggers sending of AJAX request to the server, so, naturally, the latter happens first. Also, you can attach a client side callback to get a hook to JavaScript when AJAX response has been successfully committed, by specifying onevent attribute.

Answer 2

My code:

<h:inputText id="appleNO" value="#{xxxModel.appleNO}" size="3" maxlength="3">
  <f:ajax event="blur" execute="@form" listener="#{xxxController.xxxAction()}" render="appleNO"/>
</h:inputText>

when textbox lost foucs (onblur), xxxAction will be triggered.