レスポンシブ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バージョン（スタート時点）：こちら
■ 体当たり開始
前回 は、作成確認ダイアログを閉じた時の動作を呼び出し元（include元）に記述した、
function whenDialogConfirmClosed(intRslt) {...}
を２箇所書いちゃっていますが、させたい動作がそれぞれの呼び出し元で異なるために単純に片方消すという訳にはいかないという旨を書いたところまででした。
それぞれの呼び出し元で処理を書いているので、function の名称を変えて区別します。
実はそのやり方は、Parllet/app/views/dialogFrmUpdMst.html でやっていますので、今回は手法を合わせる形で実施していきます。
Parllet/app/views/dialogFrmUpdRec.html での名称は whenDialogConfirmClosedDfur 、Parllet/app/views/DetailList/dl_header.html での名称は whenDialogConfirmClosedDl とします。
Parllet/app/views/dialogFrmUpdRec.html 内の編集。（太字の部分）
<script type="text/javascript">
<!--
/* dialogConfirmを閉じた時の動作は呼び出し元で行う */
function whenDialogConfirmClosedDfur(intRslt) {
（中略）
}
Parllet/app/views/DetailList/dl_header.html 内の編集。（太字の部分）
<script type="text/javascript">
<!--
/* dialogConfirmを閉じた時の動作は呼び出し元で行う */
function whenDialogConfirmClosedDl(intRslt) {
（中略）
}
どっちから呼び出されたか判別するために function openDialogConfirm に引数を追加して、ダイアログを閉じる際に分岐します。
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;
default:
alert("Unanticipated calledFrom error");
}
}
});
jQuery("#dialog-confirm").dialog("open");
});
}
// -->
</script>
※ 細かく言うと他にも whenDialogConfirmClosed を呼び出している箇所がありますが、全て適切に変更しました。
呼び出し元にも引数を追加します。
Parllet/app/views/dialogFrmUpdRec.html 内に追記。（太字の部分）
/**
* イベント系
*/
jQuery(function() {
/* 「収支種類」の選択変更イベント */
jQuery('#dfurBTypeSel').change(function(e) {
var jText = jQuery(this).children(':selected').text(),
jVal = jQuery(this).val(),
strCalledFrom = "dialogFrmUpdRec";
//「収支種類」が収入・支出で、「項目」のリストがゼロの時
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[jVal]]).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(subCatPrlt).length===0) {
e.preventDefault();
//Parllet作成用ダイアログ
openDialogConfirm("&{'views.dialogConfirm.case.prlt'}", jText, strCalledFrom);
（中略）
});
Parllet/app/views/DetailList/dl_header.html 内の編集。（太字の部分）
<script type="text/javascript">
<!--
jQuery(function() {
var intPadTop = jQuery('#header').height() - jQuery('#prltMain').css('padding-top').replace("px", "") - jQuery('#dlMain').css('margin-top').replace("px", ""),
strCalledFrom = "dl_header";
（中略）
/* リンクのクリックイベント */
%{hu = models.HaUser.find("byEmail", session.username).first()}%
jQuery("#aDlRemainderBank, #aDlRemainderBank2").click(function(e) {
（中略）
if (${hdlgCnt}===0) {
//口座・電子マネー作成用ダイアログ
openDialogConfirm("&{'views.dialogConfirm.case.bkem'}", jText, strCalledFrom);
e.preventDefault();
}
});
jQuery("#aDlRemainderPrlt").click(function(e) {
（中略）
if (${idpCnt}===0) {
//Parllet作成用ダイアログ
openDialogConfirm("&{'views.dialogConfirm.case.prlt'}", jText, strCalledFrom);
e.preventDefault();
}
});
（中略）
});
（中略）
// -->
</script>
■ 動作確認
まずは dl_header.html の方から。
前回 改修して１回で開くようになった残高明細（口座系）をクリック。
ここで開いているのが作成確認ダイアログ。 口座を作成をクリックし、
作成確認ダイアログが閉じたときの処理として、正しく口座作成ダイアログが開きました。
次は dialogFrmUpdRec.html を確認します。
せっかくなんで、口座系でないモノで確認を。
項目（収入）で確認するため、一度項目（収入）を全て削除します。
はい、項目（収入）が全て削除され、直後に家計簿入力をクリックしました。
項目（収入）が１つも無いため、作成確認ダイアログが開きました。 項目（収入）を作成をクリックし、
作成確認ダイアログが閉じたときの処理として、正しく項目（収入）作成ダイアログが開きました。
今回は以上です。
お疲れ様でした！
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0