レスポンシブWebデザイン導入（Parllet の場合 旧家計簿入力ページ（特別編）） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
sakashushu です。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズは一旦終了していて、今は不具合対応を主に行っているんですが今回は特別編ということで、ちょっと特殊な対応を行います。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら
■ 現状
3/26 にも書いたように、Parllet（パレット） の家計簿入力は ダイアログです。
そうです、他のページ（残高表・日計表・明細表・設定）と違って、家計簿入力だけはページでなくダイアログなんです。それについてはご意見も頂いているのですが、今のところ他に良い案が思いつかず、ダイアログの状態で継続しております。
via: レスポンシブWebデザイン導入案（Parllet の場合（家計簿入力））
しかし、以前は家計簿入力も他と同じようにページで作っていました。
その家計簿入力ページの機能自体は今でも残しています。（普通のページ遷移では行けなくしてありますが。）
ここのところ相談役の妻に iphone での動きを見てもらっていたんですが、 どうも家計簿入力ダイアログの動きでおかしいところが多いのです。
それを見ていて、「スマホの場合だけダイアログでなくページにするのもありかな？」と考え始めました。（あくまで可能性ですが。）
で、久しぶりに軽く動かしてみたところ、4/3 と同じ問題が。
まず家計簿入力ページを表示させたのがこちら。
※ スライドメニューのトリガーが表示されてたり、テキストボックスとコンボボックス等の幅が違うこととかは今回は無視でお願いしますw
4/4 と同じく、項目（収入）が全て削除された状態で行っています。
収支種類から収入を選択して、
本来なら作成確認ダイアログが出るはずが出ません。
一旦支出を選択して、
再度収入を選択し直すと今度は作成確認ダイアログが出ます。
そしてキャンセルボタンを押すと、
エラーが出ます。
いつものように体当たりでブログラミング（ブログを書きながらプログラミング）していきます。
■ 体当たり開始
まずは #{include 'dialogConfirm.html' /} の削除です。
Parllet/app/views/RecordEdit/recordEdit.html 内から削除します。
削除前
#{set 'headerTools'}
#{include 'headerTools.html' /}
#{/set}
#{include 'dialogConfirm.html' /}
<script type="text/javascript">
削除後
#{set 'headerTools'}
#{include 'headerTools.html' /}
#{/set}
<script type="text/javascript">
次に、whenDialogConfirmClosed の分岐の対応。
recordEdit.html での名称は whenDialogConfirmClosedRe とします。
Parllet/app/views/RecordEdit/recordEdit.html 内の編集。（太字の部分）
<script type="text/javascript">
<!--
/* dialogConfirmを閉じた時の動作は呼び出し元で行う */
function whenDialogConfirmClosedRe(intRslt) {
（中略）
}
そして、ダイアログを閉じる際の分岐に追加します。
Parllet/app/views/dialogConfirm.html 内の追記・編集。（太字の部分）
<script type="text/javascript">
<!--
function openDialogConfirm(strCase, strUnableItem, calledFrom) {
jQuery(function() {
（中略）
jQuery("#dialog-confirm").dialog({
（中略）
close: function() {
//ダイアログクローズ時の処理は呼び出し元で行う
switch (calledFrom) {
case "dialogFrmUpdRec":
whenDialogConfirmClosedDfur(intRslt);
break;
case "dl_header":
whenDialogConfirmClosedDl(intRslt);
break;
case "recordEdit":
whenDialogConfirmClosedRe(intRslt);
break;
default:
alert("Unanticipated calledFrom error");
}
}
});
jQuery("#dialog-confirm").dialog("open");
});
}
// -->
</script>
今回も、呼び出し元に引数を追加します。
Parllet/app/views/RecordEdit/recordEdit.html 内に追記。（太字の部分）
/* 「収支種類」の選択変更イベント */
jQuery('#balance_type_mst').change(function(e){
var jText = jQuery(this).children(':selected').text(),
jVal = jQuery(this).val(),
strCalledFrom = "recordEdit";
//「収支種類」が収入・支出で、「項目」のリストがゼロの時
if ((jText==="&{'BalanceType.in'}" ||
jText==="&{'BalanceType.out'}") &&
jQuery(subCatItem[jVal]).length===0) {
e.preventDefault();
if (jText==="&{'BalanceType.in'}")
//項目（収入）作成用ダイアログ
openDialogConfirm("&{'views.dialogConfirm.case.itemIn'}", jText, strCalledFrom);
if (jText==="&{'BalanceType.out'}")
//項目（支出）作成用ダイアログ
openDialogConfirm("&{'views.dialogConfirm.case.itemOut'}", jText, strCalledFrom);
//「収支種類」が口座預入・口座引出で、「取扱(実際)」のリストがゼロの時
} else if ((jText==="&{'BalanceType.bank_in'}" ||
jText==="&{'BalanceType.bank_out'}") &&
jQuery(subCatHdlgSmall[subCatHdlgLarge[jQuery('#balance_type_mst').val()]]).length===0) {
e.preventDefault();
//口座・電子マネー作成用ダイアログ
openDialogConfirm("&{'views.dialogConfirm.case.bkem'}", jText, strCalledFrom);
//「収支種類」がParllet預入・Parllet引出で、「取扱(Parllet)」のリストがゼロの時
} else if ((jText==="&{'BalanceType.parllet_in'}" ||
jText==="&{'BalanceType.parllet_out'}") &&
jQuery('#parllet_mst').children().length===1) {
e.preventDefault();
//Parllet作成用ダイアログ
openDialogConfirm("&{'views.dialogConfirm.case.prlt'}", jText, strCalledFrom);
} else {
（中略）
}
});
■ 動作確認
家計簿入力ページをリロード。
収入を選択すると、
初回から作成確認ダイアログが出ます。
キャンセルボタンを押しても、
エラーは出なくなりました。
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/4/7）では公開しているParllet（パレット） の方には反映しておりません。
はい、今回は以上です。
お疲れ様でした！
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0