プログラミング Java

【SpringBoot入門】#11~ 削除ダイアログの作成

投稿日:2021年1月17日 更新日:

概要

検索結果から削除機能を呼び出した際に、削除を確認するためのダイアログです。
実装はjQueryで行いますので、mavenへの追加作業等の準備を別途行います。

イメージ

jQueryの準備

jQueryを使ってダイアログを表示しますので、利用できるように準備します。
 

Maven

Mavenはプロジェクト管理ツールです。
pom.xmlというファイルで利用可能なライブラリを管理できるようになっていますので、
このファイルにjQueryを追加します。

dependenciesタグの中に、dependencyタグで囲って追加します。
引用:JQuery » 3.5.1

jQueryの読込

jQueryを使えるように、header.htmlのheadタグ内に追加します。

このとき、defer属性を付けます。
これは、DOMの構築が完了してからJSが読み込まれるようにする指定です。
これが無いと、DOM構築前にJSが読み込まれ、削除イベントが発生しない可能性がありますので、付けるようにして下さい。
 

ダイアログの作成

検索一覧の削除ボタン

list.htmlの削除ボタンに、「delete-action」というクラスを付けます。
これは、削除ボタン押下のイベントを検知するための目印と理解して頂ければよいです。

削除ダイアログ

以下のパスにダイアログ画面用のファイルを作成します。
 パス:src\main\resources\static\js
 ファイル:dialog.js

削除ボタンのイベントを実装します。

・イベント発火対象の指定
 クラスが「delete-action」である画面の部分がクリックされたらイベントを発火するようにしています。
 「.delete-action」の「.(ドット)」は、class(クラス)であることを指定しています。

・確認メッセージ
 confirmメソッドで確認ダイアログを表示します。
 その際のメッセージは、「DELETE_MESSAGE」で定義したものです。
 確認ダイアログでキャンセルを選択した場合、falseが返却されるので後続処理が止まります。

まとめ

・ダイアログ画面の実装はjQueryで実装できる。
・発火したいイベントはクラス(セレクタ)を指定することで実装可能になる。
・ダイアログ画面のキャンセルを選択すると処理が止めるには、falseを返却する。

今までJavaやSQLばかりでしたが、ここではjQueryに触れました。
Webアプリケーションを開発していると、フロント周りも知っておくと幅が広がります。
今まで触ったことが無い、またはあまり触れたことが無い方は、「こういった使い方があるのか」と思って頂けただけでも収穫だったと思います。

 
最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!
もし内容が良かったらランキング評価を頂けると励みになります(^^)

ランキング評価する

-プログラミング, Java
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

【JdbcTemplate】IN句に値を入れて複数件取得する方法

JdbcTemplateでIN句に毎回異なる数の値をセットして、 複数のレコードを取得する場合は、「NamedParameterJdbcTemplate」で取得することができます。 コード例 [cra …

【SpringBoot入門】#8~ 検索機能の実装

概要 ・検索フォームから条件を指定して検索すると、条件に一致する結果が一覧画面に表示される。 ・検索条件は複合的に指定できることとする。 ・検索結果は適切にフォーマットされることとする。  (日付はy …

【SpringBoot入門】#10~ 更新機能の実装

概要 既に登録済みの書籍情報を画面上で編集し、更新する処理を実装します。 更新した内容が反映されていることを確認するところまでを行います。   フロントエンド 更新情報のリクエスト edit.html …

no image

prepareステートメントの挙動について調べてみた

調べるきっかけ PHPでSQLをセキュアに記述する方法としてprepareステートメントが推奨されているが、なぜなのかがわからず、挙動を調べれば自分なりに納得のいく答えがでるのではないかと思ったため。 …

【Java】画像ファイルをバイナリで比較する方法

  画像ファイルの比較 比較元ファイル 素材はPhotoACから拝借しました。 コピー元画像:PCを持つ女性 コピーしたファイルとの比較(True) コピー元ファイルをコピーしただけのファイ …

記事を探す

SpringFramworkの良書

■おすすめ教材
Javaの基本を学んだ人が、次のステップとして読む本(中級者向け)

※SpringはJavaのFrameworkの1つです。
変更のしやすさ、保守性の高さが特徴です。