Parllet 改修（予算の更新の submit をやめてjquery.post() に－５） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; ）
※ もはや挿絵のコメントは本文と何の関係もございません・・・。
前回（2/2）の続きです。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）に
頂いたフィードバック、
日計表の月予算「更新」は探してしまいました。通常入力の流れからいくと、下部にあることを想像してしまいます。
についての対応を続けます。（「現状」と「改修案」については初回（1/30）を参照願います。）
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリのCommitバージョン：こちら
■ 改修作業の小分けを再度提示
初回（1/30）に実験的に、エントリ毎にひと段落つけ易いように小分けに区切るイメージをしました。
- 予算入力ボックスのフォーカス取得・喪失イベントで値の変化を判別し、無視・新規作成・更新・削除を判別する
- 1. のイベントの無視以外の場合時は合計に反映（加算・減算・削除）する
- 1. のイベントの新規作成の場合のアクション（Controllerクラス内のアクションメソッド）を作成
- 1. のイベントの更新の場合のアクションを作成
- 1. のイベントの削除の場合のアクションを作成
前回は
4. 1. のイベントの更新の場合のアクションを作成
が完了したので、今回は
5. 1. のイベントの削除の場合のアクションを作成
をブログラミング（ブログを書きながらプログラミング）していきます。
■ 体当たり開始
2/1 にController クラスに作ったアクションメソッド：updateBudget に、更新時のコードを追記していきます。
削除の判別のため、引数に削除フラグも追加します。
Parllet/app/controllers/Common.java 内に追記・編集（太字の部分）。
public static void updateBudget(
Long lngId,
String strLargeCate,
String strItem,
Integer intYear,
Integer intMonth,
Integer intAmnt,
Boolean bolDelFlg) {
WkCmBdgtRslt wr = new WkCmBdgtRslt();
Budget bG = null;
// 更新・削除
if (lngId!=null) {
// 予算の読み込み
bG = Budget.findById(lngId);
//削除
if (bolDelFlg!=null && bolDelFlg) {
bG.delete();
wr.setIntRslt(0);
wr.setbG(bG);
renderJSON(wr);
}
bG.amount = intAmnt;
validation.valid(bG);
if (validation.hasErrors()) {
wr.setIntRslt(99);
wr.setStrErr(Messages.get(validation.errors().get(0).message()));
renderJSON(wr);
}
bG.save();
wr.setIntRslt(0);
wr.setbG(bG);
renderJSON(wr);
}
// 新規作成
（後略）
}
次はフォーカス喪失イベント内の jQuery.post() 部分への追記。
Parllet/app/views/DailyAccount/dailyAccount.html 内のjQuery(function() {...} 内に追記（太字の部分）
/* 予算入力ボックス フォーカス喪失イベント */
jQuery('.bdgtBox').blur(function() {
（中略）
var jqxhr;
// 新規作成
if (jQuery(this).data('valClnt')==='') {
（中略）
return false;
}
// 削除
if (strChange==='') {
jqxhr = jQuery.post('@{Common.updateBudget}', {lngId: jQuery(this).prevAll('input[name=e_budget_id]').val(), bolDelFlg: true});
jqxhr
.done(function(z) {
switch (z.intRslt) {
case 0:
break;
case 99:
alert(z.strErr);
break;
default:
strErrMsg += " result Error";
alert(strErrMsg);
}
})
.fail(function() {
strErrMsg += " Failed";
alert(strErrMsg);
});
return false;
}
// 更新
（中略）
});
今回も動作確認いきます。
恒例のリロード！
金額を消して、
フォーカス移動。
そしれこれも恒例のDBが更新されているかどうかをリロードして確認。
いけてました！
今回の目標である
5. 1. のイベントの削除の場合のアクションを作成
についての動きは完了しました。
はい！
では微調整です。
jQuery.post() の機能追加は終わったので、今までの submit の機能は不要になります。
ので、更新ボタンを消します。
Parllet/app/views/DailyAccount/dailyAccount.html 内から以下のinput要素を削除します。
<input type="submit" value="&{'views.common.update'}" id="idSbmtUpdBudget" name="sbmtUpdBudget" class="daBtn_upd_budget"/>
リロードします！
消えました～。
最後に、今回の一連の改修（1/30・1/31・2/1・2/2・今回）を反映した
Github公開リポジトリのCommitバージョンはこちらで、追加・編集した部分（差分）はこちらで見れます。
※ 今までは、「毎度の念のための断り」として、「公開しているParllet（パレット）の方には反映しておりません。」と書いてきたんですが、今回は大丈夫だと判断したので、既に反映しております！
お疲れ様でした！
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0