Parllet 改修（予算の更新の submit をやめてjquery.post() に－３）

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

前回（1/31）の続きです。

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. のイベントの削除の場合のアクションを作成

前回は

2. 1. のイベントの無視以外の場合時は合計に反映（加算・減算・削除）する

が完了したので、今回は

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

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

 

■ 体当たり開始

Controller クラスに予算テーブル（Budget）を更新する アクションメソッド：updateBudget を作成する。

引数は 項目の種類・項目名・年・月・金額。

Parllet/app/controllers/Common.java 内に作成。

public static void updateBudget(
        String strLargeCate,
        String strItem,
        Integer intYear,
        Integer intMonth,
        Integer intAmnt) {
    WkCmBdgtRslt wr = new WkCmBdgtRslt();
    Budget bG = null;
    
    // 新規作成
    HaUser hU = (HaUser)renderArgs.get("haUser");
    ItemMst iM = null;
    ParlletMst pM = null;
    if (strLargeCate==null) {
        wr.setIntRslt(99);
        wr.setStrErr("strItemCate null Exception");
        renderJSON(wr);
    }
    if (strLargeCate.equals(BALANCE_TYPE_IN) || strLargeCate.equals(BALANCE_TYPE_OUT)) {
        iM = ItemMst.find("ha_user = ? and item_name = ?", hU, strItem).first();
    } else if (strLargeCate.equals(BALANCE_TYPE_PARLLET_INOUT)) {
        pM = ParlletMst.find("ha_user = ? and parllet_name = ?", hU, strItem).first();
    } else {
        wr.setIntRslt(99);
        wr.setStrErr("strItemCate default Exception");
        renderJSON(wr);
    }
    
    // 予算の作成
    bG = new Budget(hU, intYear, intMonth, intAmnt, iM, pM);
    
    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);
}

 

はい、アクションは出来たんですが、引数の項目の種類と項目名をどう持ってくるか。

前回もちょっと触れた通り、予算入力ボックスは

Play framework の、組込みテンプレートタグ：list

によるループ内で記述されているので、今回も判別が必要です。

参考：組込みテンプレートタグ - Play Framework
（参考は 2014/1/31 現在は Play! の1.2.7 のドキュメントです。）

 

前回はPlay framework の、Groovy を使ったテンプレートの構文

スクリプト: %{…}%

参考：テンプレートエンジン - Play Framework
（参考は 2014/1/31 現在は Play! の1.2.7 のドキュメントです。） 

で判別したんですが、今回はソース内に既にある要素を使ってみます。

 

Parllet/app/views/DailyAccount/dailyAccount.html 内の以下の太字の部分

<!-- 予算あり -->
#{if lwda.bBudgetFlg}
    %{
        （中略）
    }%
    <!-- 項目・Parllet　毎 -->
    #{if lwda.sItem != ''}
        <div class="da_cate1${lwda.bolLastItemFlg ? ' da_cate1_last' : ''}"></div>
        <div class="da_cate2">${lwda.sItem}</div>
        <div class="da_budget daBudgetSubject">
            <input type="hidden" name="e_budget_id" value="${lwda.lBudgetId}" />
            <input type="hidden" name="e_large_category" value="${lwda.sLargeCategory}" />
            <input type="hidden" name="e_item" value="${lwda.sItem}"/>
            <input type="text" class="numeric bdgtBox ${vLargeCate}" name="e_budget_amount" value="${lwda.lBudgetAmount?.format('###,###')}" />
        </div>

から持ってこれそうなんですが、私は jQuery の id や class からでなく、

name 要素から値を取得したことがありませんでした。

 

「jquery name 取得」で検索！

inputのvalue値

サンプル

<input type="" name="sample" value="" />

type="text"

$('[name=sample]').val();


via: jQueryでformを操る【nameの値を取得する】 ::: 0から目指すWebマスター

はい！分かりました。

 

ではフォーカス喪失イベント内の jQuery.post() 部分を作成します。

Parllet/app/views/DailyAccount/dailyAccount.html 内のjQuery(function() {...} 内に追記（太字の部分）

var jqxhr,
    strErrMsg;
// 新規作成
if (jQuery(this).data('valClnt')==='') {
    jqxhr = jQuery.post('@{Common.updateBudget}', {strLargeCate: jQuery(this).prevAll('input[name=e_large_category]').val(), strItem: jQuery(this).prev('input[name=e_item]').val(), intYear: vYear, intMonth: vMonth, 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);
    });
    
    return false;
}

 

はーい！動作確認しま～す。

リロードしてこの状態。

 

給与を入力して、

フォーカス移動。

その他も入力して、

フォーカス移動。

見た目的には前回と同じなのでこの時点では確認になりませんが、実際にDBが更新されているかどうかはリロードしても見た目が変わらないことで確認できます。

 

えい！（リロード中）

リロード終了。

はい！見た目が変わらないのでOKです。

 

という訳で、今回の目標である

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

は完了しました。

次回は

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

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

 

次回に続きます！

 

2/2 追記

続きを書きました。

 

 

---

 

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

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

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

 

 

 

タグ：jQuery Ajax 公開アプリ 体当たり ブログラミング Parllet Play Framework