Google
SSブログ

Parllet 改修(予算の更新の submit をやめてjquery.post() に-4) [公開アプリ]

※ 注意! このエントリは ブログラミング(ブログを書きながらプログラミング)です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。(過去の事例:2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; )

01_img.jpg

前回(2/1)の続きです。

Parllet(個人で作成・公開しているアルファ版のWeb家計簿)に

頂いたフィードバック、

日計表の月予算「更新」は探してしまいました。通常入力の流れからいくと、下部にあることを想像してしまいます。

についての対応を続けます。(「現状」と「改修案」については初回(1/30)を参照願います。)

 

スポンサードリンク

 

 

■ ざっくり環境

OS:Windows 7 Home Premium

Play Flamework:1.2.4

ブラウザ:IE 11.0

Github公開リポジトリのCommitバージョン:こちら

 

■ 改修作業の小分けを再度提示

初回(1/30)に実験的に、エントリ毎にひと段落つけ易いように小分けに区切るイメージをしました。

  1. 予算入力ボックスのフォーカス取得・喪失イベントで値の変化を判別し、無視新規作成更新削除を判別する
  2. 1. のイベントの無視以外の場合時は合計に反映(加算・減算・削除)する
  3. 1. のイベントの新規作成の場合のアクション(Controllerクラス内のアクションメソッド)を作成
  4. 1. のイベントの更新の場合のアクションを作成
  5. 1. のイベントの削除の場合のアクションを作成

前回

3. 1. のイベントの新規作成の場合のアクション(Controllerクラス内のアクションメソッド)を作成

が完了したので、今回は

4. 1. のイベントの更新の場合のアクションを作成

ブログラミング(ブログを書きながらプログラミング)していきます。

 

■ 体当たり開始

前回 Controller クラスに作ったアクションメソッド:updateBudget に、更新時のコードを追記していきます。

更新のため、引数に予算IDも追加します。

Parllet/app/controllers/Common.java 内に追記(太字の部分)。

public static void updateBudget(
        Long lngId,
        String strLargeCate,
        String strItem,
        Integer intYear,
        Integer intMonth,
        Integer intAmnt) {
    WkCmBdgtRslt wr = new WkCmBdgtRslt();
    Budget bG = null;
    
    // 更新
    if (lngId!=null) {
        // 予算の読み込み
        bG = Budget.findById(lngId);
        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 (jQuery(this).val()==='') {
        return false;
    }
    // 更新
    jqxhr = jQuery.post('@{Common.updateBudget}', {lngId: jQuery(this).prevAll('input[name=e_budget_id]').val(), intAmnt: intChange});
    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);
    });
    
});

 

はい!今回もここから動作確認です!

リロードしてこの状態。

02_check_01.jpg

その他の金額を変更して、

03_check_02.jpg

フォーカス移動。

04_check_03.jpg

前回と同様に、DBが更新されているかどうかをリロードして確認します。

05_check_04.jpg

06_check_05.jpg

大丈夫でした!

 

はい、今回の目標である

4. 1. のイベントの更新の場合のアクションを作成

も、つつがなく完了致しました。(順調なのでますます気を引き締めます!)

次回は

5. 1. のイベントの削除の場合のアクションを作成

に入っていきたいと思います。

 

次回に続きます!

 

 

2/3 追記

続きを書きました。

 

 


 

いつも最後まで読んでいただいてありがとうございますm(__)m

何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)

またお越しくださいませませ!

 

 

 


nice!(0)  コメント(0)  トラックバック(1) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 1

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。