レスポンシブ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バージョン（スタート時点）：こちら
■ 現状
明細表の１つに残高明細（口座系）がありますが、これは口座か電子マネーの残高明細表を表示するページです。
しかし、Parllet（パレット） 登録直後は、口座も電子マネーも存在しません。
ので、収支明細ページから残高明細（口座系）をクリックすると作成確認ダイアログ（dialogConfirm.html）が表示される仕様です。
で、クリックしてみたところ、表示されません。
もう一度クリックしてみたところ、
今度は表示されました。
いつものように体当たりで学びながら進めていきます。
■ 体当たり開始
久しぶりにF12開発ツールで辿る様子を載せます。
要素の選択で、
残高明細（口座系）をクリック。
id の aDlRemainderBank をコピー。
デバッガーに切り替えて、
検索窓にペーストして「#aDlRemainderBank」で検索。
検索で飛んだクリックイベント内の function 名、openDialogConfirm( をコピー。
検索窓にペーストして「function openDialogConfirm(」で検索。
この行でヒットするんですが、
もう一度次を検索をクリックすると、この行でもヒット！
要はソースが重複しちゃってるってぇことです・・・。
Parllet（パレット） は、Play framework の組込みテンプレートタグ の include を使ってテンプレートの取り込みを行っていて、作成確認ダイアログもそれに該当します。
include
別のテンプレートを取り込みます。取り込み側のテンプレート上の全ての変数は、取り込んだ側のテンプレートにて直接利用することができます。
<div id="tree"> #{include 'tree.html' /} </div>
via: 組込みテンプレートタグ - Play Framework
（上記参考は 2014/1/17 現在は Play! の1.2.7 のドキュメントです。私が使っているのは 1.2.4 です。）
#{include 'dialogConfirm.html' /}
で grep をかけたところ、
Parllet/app/views/dialogFrmUpdRec.html 内とParllet/app/views/DetailList/dl_header.html 内の双方に書かれていました。
dialogFrmUpdRec.html はログイン後の全てのページで呼ばれているため、単純に dl_header.html での記述が余計ですね。
Parllet/app/views/DetailList/dl_header.html 内から削除します。
削除前
// -->
</script>
#{include 'dialogConfirm.html' /}
<script type="text/javascript">
<!--
/* dialogConfirmを閉じた時の動作は呼び出し元で行う */
function whenDialogConfirmClosed(intRslt) {
削除後
// -->
</script>
<script type="text/javascript">
<!--
/* dialogConfirmを閉じた時の動作は呼び出し元で行う */
function whenDialogConfirmClosed(intRslt) {
この状態で、１回目のクリックで
作成確認ダイアログが開くようになりました。
しかし、実はこれだけでは不十分だと思ってまして。
Parllet（パレット） のダイアログは、さっきの include を使っている関係で、閉じたときの動作を呼び出し元（include元）に記述しています。
作成確認ダイアログ の場合は
function whenDialogConfirmClosed(intRslt) {...}
ってのがそれに該当します。
勘の良い方はお気づきかもしれません。
include を２箇所でしていたってことは・・・。
そうです。 whenDialogConfirmClosed も２箇所書いちゃってると。
一応F12開発者ツールで見てみますと、
この行と、
この行でヒットしてますね。
これは単純に片方消す訳にはいかないんですわ。
何でかっていうと、わざわざ呼び出し元（include元）に記述しているのは、させたい動作がそれぞれで異なるからなんですね。
やるべきことがハッキリしたタイミングで申し訳ないんですが、今回はここまでです。
次回に whenDialogConfirmClosed 部分の改修を行っていきます。
続きます！
4/4 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0