skillup

技術ブログ

Java JavaScript

JSF+ajax

投稿日:

JSFでajaxを使うときにいろいろと調べたのでメモ。

やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。

ajaxを使うときの考え方ですが、基本的には

  1. トリガー
  2. 送信コンポーネント
  3. メソッド
  4. レンダー

に注意します。

1.トリガー

ようはどのイベントが起こった時に通信が発生するかという起点になる動きのことです。

<f:ajax>の部分がajaxのタグを記述する場所になります。

ソースは該当月の部分のみです。

このeventとという部分がトリガーになります。今回はプルダウンを変更したら~という設定にしてあります。

トリガーとなるイベントは通常のJavaScriptのイベントであれば大体大丈夫かと思います。

2.送信コンポーネント

次はトリガーが起こった時にどのデータをCDI側に送るかです。executeで指定します。

今回は該当月のみ(自分自身)なので@thisとしてありますが、下記のような送信方法があります。

  • 全体・・@all
  • form内全体・・@form
  • 送らない・・@none
  • 自分自身・・@this
  • idの場合にはexecute=”sample_id sample_id2″などスペースを空けて指定。

3.メソッド

listenerに記述。ここでCDIのメソッドを呼ぶことができます。

またAjaxを使うときはスコープをRequestではなくViewにしたほうがよいでしょう。

RequestだとイベントのたびにCDIが初期化されますがViewであれば該当メソッドだけ呼ばれるため、その分処理が速くなります。

4.レンダー

ここがJSFのポイントなんですが、CDIのプロパティが変わっても自動的に画面側の値は変わりません!

どの値をレンダリングさせるか?ということを指定してあげないといけないんですね。

これで結構時間食いました。CDIの値がしっかり変わっているのに画面の値が変わらない・・・

どの値を反映させるかがrenderになります。

ちなみに指定方法はexecuteと同じになります。

番外

ajax反映後のjquery

給与明細には経費の詳細を見れるようにボタンにトリガーを付けておいたのですが、ajax反映後変化しないというバグが起こりました。

そういえば昔、ajaxで追加したテーブルはjqueryが起動しませんでしたね・・・

解決手段ですが、下記のように記述しておけば無事起動します。

下記リンクを参考にしました。

http://runble1.com/jquery-on-click/

追記

ちなみにajaxはクロスドメイン(ドメインが違うもの)のものを読み込んだり、アクセスしたりはできません。

jqueryを外部のURLから読み込んだ時にこの問題が起きるので注意しましょう。(ブラウザのコンソール機能でみるとわかりやすい。)

http://tadtak.jugem.jp/?eid=59
http://www.muratayusuke.com/2011/05/28/access-control-allow-origin/

-Java, JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JSFとManagedBeanがバインドされない

JSFとmanagedBeanはEL式.プロパティでバインドできますが、専用のタグを使わないとバインドされません。 managedBeanでtestというフィールドがあった場合、 JSF側で [cra …

no image

netbeansのJPQL補助機能

JPAでは基本的に生のSQLではなく、JPQLを使って書きます。 SQLでもタイプミスにイライラさせられることは多いのですが、JPQLはもっとですね・・・爆 そこで使えるのがNetbeansの入力補助 …

no image

Vue.jsについて

次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・ Contents1 vue.jsとは?2 ソース3 参 …

no image

JavaScriptでの時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …