Q&A
回答ありがとうございます。
th:data-department="'${user.deployment_id}'"でもご指摘頂いた方法でもdata型に値を持たせることはできたのですが、JavaScriptがうまく動いていないのが原因なのかモックと同じ動きをしません・・・
文字数制限がかかるのでソースコードを外部サイトに貼り付けました。
モックアップで表示することができた内容をThymeleaf上で表示することができなくて悩んでいます。
モックアップでは、部署を選択することで社員の名前を絞り込み選択することができたのですが、Thymeleaf上では、部署で絞ることができずにすべて選択できない状態になってしまいます。
ご教授お願いいたします。
参考にしたサイト：https://qiita.com/taktos/items/8c4a951d03d0da869d89
以前にchoosen.jsについて質問した内容：https://teratail.com/questions/280999
Thymeleaf
https://notepad.pw/2l2y1gu2
html
1<!DOCTYPE html> 2<html lang="ja" class="nanikore" xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 10 <!--Bootstrap CSS --> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 12 13 <!--Font Awesome5--> 14 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 15 16 <link rel="stylesheet" href="../css/stylesheet.css"> 17 18 <link rel="stylesheet" href="../css/chosen-css.css"> 19 20</head> 21 22<body class="nanikore"> 23 24 <div class="container h-100"> 25 26 <div class="row align-items-center h-100"> 27 <div class="col-6 mx-auto"> 28 <div class="jumbotron text-center" style="background-color: #5ca580;"> 29 <div class="text-center"> 30 31 <h2 class="mb-5"><i class="fas fa-users"></i>担当者を選択してください</h2> 32 <form action="" class="form-inline justify-content-center"> 33 34 <div class="form-inline"> 35 36 <div class="search-box form-group mb-2 ml-2"> 37 <select class="chosen-select form-control" name="department"> 38 <option value="" style="font-weight: 100;">部署選択</option> 39 <option value="itsol">ITソリューション部</option> 40 <option value="jigyou">事業管理部</option> 41 <option value="eigyou">営業グループ</option> 42 </select> 43 </div> 44 45 <div class="form-group mb-2 ml-2 mr-5"> 46 <select class="chosen-select form-control list" name="department"> 47 <option value="">氏名選択</option> 48 <option class="list_item" data-department="itsol">山田(やまだ)</option> 49 <option class="list_item" data-department="itsol">田中(たなか)</option> 50 <option class="list_item" data-department="jigyou">佐藤(さとう)</option> 51 <option class="list_item" data-department="jigyou">鈴木(すずき)</option> 52 <option class="list_item" data-department="eigyou">中田（なかた）</option> 53 </select> 54 </div> 55 </div> 56 57 <div class="ml-1 mt-5"> 58 <button type="button" class="btn btn-primary" data-toggle="modal" 59 data-target="#exampleModalCenter">入力完了 60 </button> 61 62 <!-- Modal --> 63 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" 64 aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> 65 <div class="modal-dialog modal-dialog-centered" role="document"> 66 <div class="modal-content"> 67 <div class="modal-header"> 68 <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5> 69 <button type="button" class="close" data-dismiss="modal" 70 aria-label="Close"> 71 <span aria-hidden="true">×</span> 72 </button> 73 </div> 74 <div class="modal-body"> 75 <p>こちらの担当者であっていますか？</p> 76 <p>ITソリューション部：山田</p> 77 </div> 78 <div class="modal-footer"> 79 <a type="button" class="btn btn-secondary" data-dismiss="modal" 80 href="visitor-top.html">キャンセル</a> 81 <a type="button" class="btn btn-primary" href="visitor-form.html">OK</a> 82 </div> 83 </div> 84 </div> 85 </div> 86 87 </div> 88 89 90 91 </form> 92 93 </div> 94 95 </div> 96 </div> 97 </div> 98 99 100 </div> 101 102 <!-- Optional JavaScript --> 103 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 104 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 105 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 106 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 107 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script> 108 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> 109 110 111 112 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 113 <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> 114 <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"> 115 116 <script> 117 $('.chosen-select').chosen({ 118 search_contains: true 119 }); 120 121 $(function () { 122 var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 123 var listItem = '.list_item'; // 絞り込み対象のアイテム 124 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 125 $(function () { 126 // 絞り込み項目を変更した時 127 $(document).on('change', '.search-box select', function () { 128 search_filter(); 129 $('.chosen-select').trigger("chosen:updated"); // 追加 130 }); 131 }); 132 //リストの絞り込みを行う 133 function search_filter() { 134 // 非表示状態を解除 135 // $(listItem).removeClass(hideClass); 136 $(listItem).attr('disabled', false); 137 for (var i = 0; i < $('.search-box select').length; i++) { 138 var name = $('.search-box select').eq(i).attr('name'); 139 // 選択されている項目を取得 140 var searchData = get_selected_input_items(name); 141 // 選択されている項目がない、またはALLを選択している場合は飛ばす 142 if (searchData.length === 0 || searchData[0] === '') { 143 continue; 144 } 145 // リスト内の各アイテムをチェック 146 for (var j = 0; j < $(listItem).length; j++) { 147 // アイテムに設定している項目を取得 148 var itemData = $(listItem).eq(j).data(name); 149 // 絞り込み対象かどうかを調べる 150 if (searchData.indexOf(itemData) === -1) { 151 //$(listItem).eq(j).addClass(hideClass); 152 $(listItem).eq(j).attr('disabled', true); 153 } 154 } 155 } 156 } 157 //選択されているoptionのvalue属性の値 158 function get_selected_input_items(name) { 159 var searchData = []; 160 // $('[name=' + name + ']:checked').each(function() { 161 $('select[name=' + name + '] option:selected').each(function () { 162 searchData.push($('select[name=' + name + '] option:selected').val()); 163 }); 164 return searchData; 165 } 166 }); 167 </script> 168 169 170</body> 171 172</html>
回答2件
0
自己解決
Spring Data JPAだと、nameを使って値を送信するのですが、nameで連動させて送ると値が重複してしまいエラーが起きるので、idとnameで連動させるようにJavaScriptを変更することで自己解決することができました。
投稿2020/09/07 04:55
総合スコア35
0
th:data-department の属性がThymeleafでは未定義です。
HTMLの定義済み属性以外の属性を出力する場合には、th:attr を使います。
html
1th:attr="data-department='${user.deployment_id}'" >
以下も参考に。
投稿2020/09/02 08:43
総合スコア12011
こちら実際に動作させてブラウザに出力されているHTMLが、モックアップで作成されているHTMLとの相違は確認されましたでしょうか。出力されている属性が違う等はない状態でしょうか？
モックアップで作成されているhtmlとの相違はないと確認しています。
属性の違いもありませんでした。
大変申し訳ありません。デバッグで確認したところ、name属性の部分でモック上では値を同じにしていないとJavaScriptが動作していませんでした。spring jpaを使用していてname属性でデータを送信しているために値を変更しないといけない状態でした。現在、name属性を取得することで作動するJavaScriptでどのようにすれば、spring jpaと両立できるか試行錯誤しています。JavaScriptは初心者すぎてネット上のものを参考にしただけなので応用がすぐにできない状況です。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。