【ajax4jsf】onchangeイベントでJavaScript実行

自分用技術メモ。


JSFのタグ、<h:inputText>にonchange属性を指定し、
JavaScriptでの入力値チェック処理を入れていた。

　　<h:inputText onchange="check(this.name)" />


が、onchangeイベント発生時にformの値を書き換える必要が出たため、
以下のように記述するもどうやら<h:inputText>のonchangeしか効いていない模様。

　　<h:inputText onchange="check(this.name)">
　　　　<a4j:support event="onchange" reRender="outputButton,outputButton2">
　　　　　　<f:setPropertyActionListener target="#{form.flg}" value="true" />
　　　　</a4j:support>
　　</h:inputText>


RichFaces Developer Guideを調べていると、それらしいものがあったので試す。

　　<h:inputText onchange="check(this.name)">
　　　　<a4j:support event="onchange" reRender="outputButton,outputButton2"
　　　　　　oncomplete="eventSetsumontenChange(this.name)">
　　　　　　<f:setPropertyActionListener target="#{form.flg}" value="true" />
　　　　</a4j:support>
　　</h:inputText>


これだとJavaScriptが実行されるのが遅い。
よく読むと「oncomplete」属性だとAjax側の処理が終わってから
実行されているので遅かったようだ。
そこで、「onsubmit」属性に変更。

　　<h:inputText onchange="check(this.name)">
　　　　<a4j:support event="onchange" reRender="outputButton,outputButton2"
　　　　　　onsubmit="eventSetsumontenChange(this.name)">
　　　　　　<f:setPropertyActionListener target="#{form.flg}" value="true" />
　　　　</a4j:support>
　　</h:inputText>


問題なく実行！
ちゃんと使い分けないと・・・

「oncomplete：要求が完了された後、クライアント側のスクリプトメソッドが呼び出される」
「onsubmit：ajaxのリクエストが送信される前にクライアント側スクリプトメソッドが呼び出される」