Petr Dušek Petr Dušek - 1 year ago 90
Javascript Question

f:ajax by onchange event

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 Source

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"/>

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.