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

投稿日：2021年1月17日更新日：2021年4月17日

概要

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

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

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

// pom.xml

・・・

<groupId>org.webjars</groupId>

<artifactId>jquery</artifactId>

</dependency>

</dependencies>

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

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

<title th:replace="${title}">title</title>

</head>

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

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

</form>

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

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

// dialog.js

const DELETE_MESSAGE = "削除してもよろしいですか？"

$('.delete-action').click(function() {

if(!confirm(DELETE_MESSAGE)){

return false;

}

});

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

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

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

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