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 ponent 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?

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 ponent 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?

• javascript
• ajax
• jsf

Share Improve this question Follow edited Jul 23, 2013 at 11:28 BalusC 1.1m376376 gold badges3.7k3.7k silver badges3.6k3.6k bronze badges asked Jul 23, 2013 at 9:27 Petr DušekPetr Dušek 63744 gold badges1212 silver badges2626 bronze badges 5

• 1 Yep , you can use ajax, thats the reason it was introduced, to submit specific data to server. you can use Jquery`s ajax call .Ref:api.jquery./jQuery.ajax – dreamweiver Commented Jul 23, 2013 at 9:33
• Maybe this is a solution: jsftoolbox./documentation/help/12-TagReference/core/… (listener attribute and implementing handleEvent(AjaxBehaviorEvent event) method). – Petr Dušek Commented Jul 23, 2013 at 9:34
• I want to solve it primary on the server side. I can use also an event attribute: stackoverflow./questions/7886453/… – Petr Dušek Commented Jul 23, 2013 at 9:38
• ok, that would help you make ajax call via jsf standards. what i said was in pure javascript lib (jQuery).Sorry if its Jquery way, then i can help you,not jsf – dreamweiver Commented Jul 23, 2013 at 9:38
• Anyway thanks, if I find out, that the jsf standards don't work, I will use your solution :-). – Petr Dušek Commented Jul 23, 2013 at 9:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 ponents to be updated on the server in tag's execute attribute. But as default value for execute of <f:ajax> is exactly @this (the ponent 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 mitted, by specifying onevent attribute.

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.