最終投稿日：2026年07月19日
<h:commandButton id="my_btn1" type="button" value="押す" styleClass="parts_button" onclick="my_alert()" />
<h:commandButton id="my_btn2" value="押す" action="#{sampleBean.submit()}" />
<h:commandButton id="my_btn3" value="AJAX" actionListener="#{sampleBean.submit()}">
<f:ajax execute="file" render="inpText" />
</h:commandButton>
<div id="loadingMessage" style="display: none;">処理中...</div>
<h:commandButton id="my_btn4" value="AJAX" actionListener="#{sampleBean.submit()}">
<f:ajax execute="@this" render="@all" onevent="handleAjaxEvent" onerror="handleAjaxError" />
</h:commandButton>
<h:selectOneMenu id="my_pref" value="#{sampleBean.name}" styleClass="parts_combo" onchange="my_alert()">
<f:selectItem itemValue="" itemLabel="-- 都道府県選択 --" noSelectionOption="true" />
<f:selectItem itemValue="1" itemLabel="東京都" />
<f:selectItem itemValue="2" itemLabel="埼玉県" />
<f:selectItem itemValue="3" itemLabel="神奈川県" />
<f:selectItem itemValue="4" itemLabel="千葉県" />
</h:selectOneMenu>
<h:inputTextarea id="area" value="#{sampleBean.name}" styleClass="parts_text" style="width: 300px; height: 150px; resize: none;" />
<BR />
<h:selectOneMenu id="my_pref2" value="#{sampleBean.name}" styleClass="parts_combo" >
<f:ajax execute="@this" render="area" />
<f:selectItem itemValue="" itemLabel="-- 都道府県選択 --" noSelectionOption="true" />
<f:selectItem itemValue="1" itemLabel="東京都" />
<f:selectItem itemValue="2" itemLabel="埼玉県" />
<f:selectItem itemValue="3" itemLabel="神奈川県" />
<f:selectItem itemValue="4" itemLabel="千葉県" />
</h:selectOneMenu>
<h:inputTextarea id="area" value="#{sampleBean.name}" styleClass="parts_text" style="width: 300px; height: 150px; resize: none;" />
<BR />
<div id="loadingMessage" style="display: none;">処理中...</div>
<h:selectOneMenu id="my_pref3" value="#{sampleBean.name}" styleClass="parts_combo" >
<f:ajax execute="@this" render="area" onevent="handleAjaxEvent" onerror="handleAjaxError" />
<f:selectItem itemValue="" itemLabel="-- 都道府県選択 --" noSelectionOption="true" />
<f:selectItem itemValue="1" itemLabel="東京都" />
<f:selectItem itemValue="2" itemLabel="埼玉県" />
<f:selectItem itemValue="3" itemLabel="神奈川県" />
<f:selectItem itemValue="4" itemLabel="千葉県" />
</h:selectOneMenu>
AJAXの処理をJavaScriptを交えて処理できます。
テキストエリアの内容を空にした状態で、プルダウンの任意の値を選択します。
するとテキストエリアに処理の内容が表示されます。
complete AJAX実行後JavaScript処理
本来は～ このタイミングでAJAXのレスポンスがテキストエリアに代入されます
success 全てのAJAX処理が完了後のavaScript処理
<h:inputTextarea id="area" value="#{sampleBean.name}" styleClass="parts_text" style="width: 300px; height: 150px; resize: none;" />
<BR />
<div id="loadingMessage" style="display: none;">処理中...</div>
<h:selectOneMenu id="my_pref4" value="#{sampleBean.name}" styleClass="parts_combo" onchange="js_ctrl(this)">
<f:selectItem itemValue="" itemLabel="-- 都道府県選択 --" noSelectionOption="true" />
<f:selectItem itemValue="1" itemLabel="東京都" />
<f:selectItem itemValue="2" itemLabel="埼玉県" />
<f:selectItem itemValue="3" itemLabel="神奈川県" />
<f:selectItem itemValue="4" itemLabel="千葉県" />
</h:selectOneMenu>
<h:commandButton id="my_pref4_hidden" tabindex="-1" style="display:none;">
<f:ajax execute="my_pref4" render="area" onevent="handleAjaxEvent" onerror="handleAjaxError" />
</h:commandButton>
<script>
function js_ctrl(element) {
if (element.value === "") {
alert("スキップします。");
return;
}
// AJAX実行
document.getElementById("my_pref4_hidden").click();
}
</script>
プルダウンを選択したらAJAXが発火します。
プルダウンが選択されたら、JavaScript『js_ctrl』が発火します。
隠しボタンである『h:commandButton』をJS制御で押下する事で「サンプル③」と同様にAJAXが発火します。
こちらの方が、例えばJSで『Yes/No』ダイアログを表示して『Yes』のみAJAXを発火させるなど自由度が上がります。
※[No]の場合はプルダウンの値を戻す処理も必要となりそうですが..
ボタンは表示されなくても、感で[TAB]を連打してリターンキー押下でのAJAX誤爆を防ぐ事ができます。
そんなAJAXをJakarutaは簡単に実装する事ができますが、１つ落とし穴があります。 『バリデーション処理が描画された画面だとAJAXの挙動がおかしくなる』です。 シチュエーションとしては、ユーザー登録画面で郵便番号から住所を自動で出力するアレです。
例えば[送信]ボタンを押下して、入力不備でエラーとして入力画面へ戻されたとします。
その際「あ、住所間違ってる」ってなったらAJAXはまともに動いて欲しいですよね！ 実はこれ普通の設定では上手く動いてくれません。
理由としては、フレームワーク側が「この画面エラーだよフラグ」を持っているからです。
このフラグは、全画面リフレッシュ（同期処理）をするまで消えません。 実はこれを突破する魔法のコードがあります。 【<f:resetValues render="target" />】 [target]を書き換えたい項目の『ID属性名』とする事で、その項目に限り書き換えが可能となります。
<h:commandButton actionListener="#{sampleBean.submit()}" >
<f:ajax execute="pref" render="jyusyo" />
<f:resetValues render="jyusyo" />
</h:commandButton>
① ID属性名 そのエレメントのみをサーバへ送信します(半角スペース区切りで複数指定可）
② @this 自身のみをサーバで送信します。ただJAVA側を発火させたい場合、自身だけをチェックしたい場合等
③ @form <form> ～ </form>の内容を全てサーバへ送信します。DB登録処理等で使用します。
④ @all 画面全体をサーバへ送信します。これを指定するくらいならAJAXを使用する必要ないです。