Play framework のWeb家計簿 Parllet（パレット）のDB更新用のAjax（jQuery.post()） [公開アプリ]
どうも、sakashushu です。
突然ですが、Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の
DB更新用の Ajax について書きたいと思います。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリのCommitバージョン：こちら
■ ちょっと経緯も交えながら
上記の環境にも書いた通り、 Parllet（パレット） はPlay framework 1.2.4 で書かれています。
開発を始めた当初は全て、 submit でDBを更新していましたが、
現在は jQuery.post() を使って更新している箇所も含まれています。
Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる
via: Ajax - ウィキペディア
ということは何となく知っていて、それをやりたかった当時の私は
まずは「play framework ajax」で検索してみました。
検索結果の一番上はモロに公式ドキュメント。
当時はurl の「・・・/documentation/1.1.1/・・・」のバージョンの部分を書き換えれば
該当バージョンに飛んだので、確か当時の最新の 1.2.2 に書き換えて読みました。
現在は 1.2.4 に書き換えても自動的に 1.2.7 に飛んじゃうようです。
JQuery による Ajax - Play Framework
当時読んだのとほぼ中身は同じと思いますが、当時の私はこのドキュメントで何を言っているのかサッパリ。（今も近いものがありますが ^^;）
だから他の検索結果を探しました。
見つけたのはこのページ。
Play framework/ajaxの実装 - PukiWiki
実は最初に読んだ時はこのページも難解と感じて、私はそっと閉じました。
でも他をいくら探しても、私がすぐ理解できるようなページが見つかりません。
ついに観念した私は、数日後に再度このページにチャレンジしたのでした。
分からないので、とにかくコードを真似しながら動きを確認しました。
ラジオボタンの選択変更によってテキスト配列から該当の順番の文字列を取得するものですが、
ここで私は初めて、jQuery のイベントから play framework の Controllerクラスにアクセスする方法が分かりました。
私が真似させてもらったのは $.post()（私は $ を jQuery と書くようにしているので jQuery.post() ）です。
※ 私が $ を jQuery と書く理由は他のライブラリ等を組み込んだ場合のコンフリクトとかもありますが、Play! のGroovy を使ったテンプレートの構文 の Expressions: ${…} と間違えたくないからです。（参考：テンプレートエンジン - Play Framework ）
■ Parllet（パレット）での動き
残高表の実残高の項目（口座・電子マネー）や
Parllet（イメージ上の口座のようなもの）残高の項目の
残高が 0 のものがある時には、チェックボックス：残高０を隠す が現れます。
チェックを入れると、残高が０の行が消えます。
この状態は、次にログインした時も保持されます。
はい、チェックボックスのチェックイベントで、DBを更新しているのです。
■ Parllet（パレット）での実装内容
Parllet/app/views/DailyAccount/balanceTable.html 内の
チェックボックスのクリックイベント
jQuery('#zeroHddnBkem, #zeroHddnPrlt, #invHddnBkem').click(function() {...} の中の
jqxhr = jQuery.post('@{Common.updateHaUserFlg}', {strHuClm: strClm, bolFlg: jqThisChkd});
jqxhr
.done(function(z) {
（中略）
})
.fail(function() {
（中略）
});
の部分で、 Controllerクラス Common の中のアクションメソッド updateHaUserFlg にアクセス。
引数 strHuClm に変数 strClm を渡し、 引数 bolFlg には変数 jqThisChkd を渡しています。
アクセスされる側の Controllerクラス Common は
Parllet/app/controllers/Common.java で、
アクションメソッド public static void updateHaUserFlg(String strHuClm, boolean bolFlg) {...}
の中でDB更新処理を行っています。
DBに 残高０を隠す のチェックの有無が保存されているので、ユーザーが一旦ログアウトして
再度ログインしても、チェックの状態は前回のまま維持されると。
■ 終わりです
はい、中身の詳細には触れません。（ご興味おありの方はリンク先（Github公開リポジトリ）のソースをご覧下さい。）
後日これと同じく jQuery.post() を使った改修をブログラミング（ブログを書きながらプログラミング）
する予定なので、今回のエントリはその予備知識的な役割を果たすんじゃないかと思っとります。
以上でーす！
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0