メインコンテンツへスキップ

閉じるボタン押下時に値変更状態を確認

  • 更新

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

Client-side JavaScript を用い、単票および明細画面で入力内容に変更があったとき、「閉じる」ボタン押下時に、確認メッセージを表示する手法を紹介します。

2. サンプル機能の内容と確認ポイント

単票ブロック設定画面で、事前に IS_DELETED という hidden 項目を用意しておきます。これは明細行の削除判定用に使用します。

以下に示す CSS クラスや上記の hidden 項目を参照することで、「閉じる」ボタン押下時に入力内容の変更有無を判定し、確認メッセージを表示します。

  • valChangeReq クラス
    必須入力項目に変更があった場合に自動的に適用される、TALON 標準の CSS クラス
  • valChange クラス
    任意入力項目に変更があった場合に自動的に適用される、TALON 標準の CSS クラス

Client-side JavaScript による実装内容は以下のとおりです。

  1. resizeContents_end 関数内で、eventName が "DELETELINE" の場合、単票ブロック内の hidden 項目に削除フラグとして値を設定します。

  2. 「閉じる」ボタンの要素を取得し、onclick イベントで入力内容の変更確認処理を実行します。

  3. 確認処理では、IS_DELETED の値および valChangeReq、valChange CSS クラスを持つ要素を参照し、変更の有無を判定します。

  4. 変更が検出された場合は確認ダイアログを表示します。

  5. 確認ダイアログで「キャンセル」が選択された場合、処理を中断します。

  6. 「OK」が選択された場合は、処理を継続して画面を閉じます。

 

🔍 確認いただけるポイント

  • 項目の変更または削除後に、確認ダイアログが表示されること

  • 確認ダイアログで「OK」を選択すると、画面が閉じられること

  • 確認ダイアログで「キャンセル」を選択すると、画面が維持されること

3. 画面イメージ

以下は、「明細ブロック」の1行目の「材料名」を変更した状態を示しています。

 

「材料名」を変更した後、「閉じる」ボタンを押下して確認ダイアログが表示された状態を示しています。

 

!++++

使用したコード一覧

•resizeContents_end()
!----