質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

解決済

SpringBoot、Thymeleaf、BootStrapでデータの受け渡しをしてレコードごとの削除モーダルを作りたい。

kazu5942
kazu5942

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

1回答

0評価

0クリップ

95閲覧

投稿2020/09/03 03:37

編集2022/01/12 10:58

前提・実現したいこと

SpringBoot、Thymeleaf、BootStrapで削除確認用モーダルを作りたいのですが、レコードごとに表示内容を変えたいです。JavaScriptでデータの受け渡しができることが分かったのですが、
データ内容がモーダルにうまく表示できずに困っています。ご教授のほどお願いします。
最終的には下記モーダル内の、th:action内に、データを持たせたいと考えています。

発生している問題・エラーメッセージ

モーダル呼び出し時に、データの取得もしくは表示ができない。

該当のモーダル

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <form th:action="@{/deleteDep/{id}}" method="POST" id="delete"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" ></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p id="name-name"></p> <p>上記データの削除を実行します</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button> <input type="submit" class="btn btn-danger" form="delete">削除 </div> </div> </div> </form> </div>

該当のJavaScript

<script> $('#deleteModal').on('show.bs.modal', function(event) { var button = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得 var id = button.data('id') //data-id の値を取得 var name = button.data('name') //data-nameの値を取得 //Ajaxの処理はここに var modal = $(this) //モーダルを取得 modal.find('.modal-title').text('削除する部署' + name) //モーダルのタイトルに値を表示 modal.find('.modal-body #name-name').val(name) //pタグにも表示 }) </script>

該当の呼び出しボタン

<tr th:each="dep:${deploymentData}"> <td class="text-center w-25"><input type="text" class="form-control" form="sort" min="0" max="999"></td> <td th:text=${dep.deployment_name}></td> <td class="text-center"><input type="hidden" name="id" th:value="${dep.id}" form="${dep.id}"></input> <a type="button" class="btn btn-primary" th:href="@{/selectDepEdit/{id}(id=${dep.id})}">編集</a></td> <td class="text-center"><a class="btn btn-danger text-center deletemodalbtn" data-toggle="modal" data-target="#deleteModal" th:data-id="${dep.id}" th:data-name="${dep.deployment_name}">削除</a></td>

現状idについては、データの渡し方と使い方がわからず、ノータッチです。
何卒宜しくお願い致します。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2020/09/03 04:18

var button = \$\(event\.relatedTarget\) 上記、目的のボタンは取れてるんでしょうか
kazu5942
kazu5942

2020/09/03 04:29

ご回答いただきましてまことにありがとうございます。このボタンはどのように取れているということが確認できるのでしょうか。
m.ts10806
m.ts10806

2020/09/03 05:10

要はない「デバッグしてください」という意味です。 ひとまずconsole\.log\(\)から
kazu5942
kazu5942

2020/09/03 06:05

JavaScriptが動作していないことがわかったので、自作のjsファイルを作ったところ、呼び出しと、deployment_nameの送信は行うことができました。<form th:action="@{/deleteDep/{id}}"のidにモーダルからdep\.idを送りたい場合、どのような処理をするのがよいでしょうか。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。