2

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?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Petr Dušek
  • 627
  • 4
  • 12
  • 26
  • 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:http://api.jquery.com/jQuery.ajax/ – dreamweiver Jul 23 '13 at 09:33
  • Maybe this is a solution: http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_ajax.html (listener attribute and implementing handleEvent(AjaxBehaviorEvent event) method). – Petr Dušek Jul 23 '13 at 09:34
  • I want to solve it primary on the server side. I can use also an event attribute: http://stackoverflow.com/questions/7886453/what-values-can-i-pass-to-the-event-attribute-of-the-fajax-tag – Petr Dušek Jul 23 '13 at 09: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 Jul 23 '13 at 09:38
  • Anyway thanks, if I find out, that the jsf standards don't work, I will use your solution :-). – Petr Dušek Jul 23 '13 at 09:40

2 Answers2

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 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.

skuntsel
  • 11,624
  • 11
  • 44
  • 67
  • But if I add a js onchange event handler to your h:inputText - what is processed as first? I mean the Javascript. – Petr Dušek Jul 23 '13 at 10:03
  • 1
    Of course the the handler will be executed first. Moreover, you can return `false` from `onchange` handler to stop AJAX request from being sent. – skuntsel Jul 23 '13 at 10:06
1

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.

Pang
  • 9,564
  • 146
  • 81
  • 122
msmvc
  • 11
  • 1