teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問[Spring Boot+thymleaf] プルダウンの中身だけを更新したい

編集履歴

質問編集履歴

17

タイトル修正

2019/11/01 05:35

投稿

tohmey
tohmey

スコア10

test CHANGED
@@ -1 +1 @@
1
- プルダウンの中身だけを更新したい（xmlns:th="http://www.thymeleaf.org" が消えてしまう）
1
+ [Spring Boot+thymleaf] プルダウンの中身だけを更新したい
test CHANGED
File without changes

16

追記しました。

2019/11/01 05:35

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -262,7 +262,7 @@
262
262
 
263
263
  $('#tdid').html(data);　を、
264
264
 
265
- $('#tdid').html('<div th:replace="replace :: flgmntB"');　と、
265
+ $('#tdid').html('<div th:replace="replace :: flgmntB"></div>');　と、
266
266
 
267
267
  直接タグを送り込むなどもしましたが、何も表示されない（replace :: flgmntBが働かないのでdivがカラ）だけでした。とにかくThymeleafがどこにもいない。という感じです。
268
268
 

15

追記しました。

2019/11/01 05:23

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -258,6 +258,16 @@
258
258
 
259
259
 
260
260
 
261
+ ### 試したこと２
262
+
263
+ $('#tdid').html(data);　を、
264
+
265
+ $('#tdid').html('<div th:replace="replace :: flgmntB"');　と、
266
+
267
+ 直接タグを送り込むなどもしましたが、何も表示されない（replace :: flgmntBが働かないのでdivがカラ）だけでした。とにかくThymeleafがどこにもいない。という感じです。
268
+
269
+
270
+
261
271
  ### 補足情報（FW/ツールのバージョンなど）
262
272
 
263
273
  thymeleaf 3.0.11.RELEASE

14

文章を修正してみました。

2019/11/01 05:22

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -263,3 +263,17 @@
263
263
  thymeleaf 3.0.11.RELEASE
264
264
 
265
265
  （環境構築した者が現場にはすでに居らず、thymeleafを初めて触る者しか居りません…）
266
+
267
+
268
+
269
+ コードの書き方の問題というよりは、表示後の画面においてthymeleafが有効にならないことが問題なのでは、と、現時点では思っております。そのため、
270
+
271
+ https://teratail.com/questions/220606
272
+
273
+ https://teratail.com/questions/220621
274
+
275
+ といった質問もさせていただいております。
276
+
277
+
278
+
279
+ あわせてよろしくお願いいたします。

13

追加、削除してみました。

2019/11/01 05:12

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -10,67 +10,85 @@
10
10
 
11
11
 
12
12
 
13
+ 期待値は、thymeleafのテンプレートフラグメントという機能によって、指定した場所にプルダウンが再構築されることですが、
14
+
15
+ 実際は、（おそらく）thymeleafを通らずhtmlで処理されてしまっており、"index :: flgmntA"という指定がそのまま文字列として画面に表示されてしまう。
16
+
17
+
18
+
19
+ 【index.html】（メイン画面）
20
+
13
- htmlには
21
+ ```html
14
22
 
15
23
  <html xmlns="http://www.w3.org/1999/xhtml"
16
24
 
17
- xmlns:th="http://www.thymeleaf.org"
25
+ xmlns:th="http://www.thymeleaf.org"
18
-
26
+
19
- xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">　
27
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
20
-
28
+
21
- と記述しているのですが、表示された画面のソースを見ると
29
+ <head></head>
30
+
22
-
31
+ <body>
32
+
33
+ <input type="text" id="ss1" /> <!--☆検索条件☆-->
34
+
35
+ <input type="text" id="ss2" /> <!--☆検索条件☆-->
36
+
37
+ <input type="text" id="ss3" /> <!--☆検索条件☆-->
38
+
39
+ <table>
40
+
41
+ <tr>
42
+
23
- <html xmlns="http://www.w3.org/1999/xhtml"
43
+ <td><div>選択肢</div></td>
44
+
24
-
45
+ <td id="tdid">
46
+
25
- xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">　
47
+ <div th:replace="replace :: flgmntB" th:fragment="flgmntA"></div> <!--★ここに置き換わる★-->
26
-
27
- と、thymeleaf.orgが消えてしまっています。
48
+
28
-
29
- それが原因かはわかりませんが。
49
+ </td>
50
+
30
-
51
+ </tr>
31
-
32
-
52
+
33
- 期待値は、thymeleafのテンプレートフラグメントという機能によって、指定した場所にプルダウンが構築されることですが、
53
+ </table>
54
+
34
-
55
+ </body>
56
+
35
- 実際は、（おそらく）thymeleafを通らずhtmlで処理されてしまい、"index :: flgmntA"という指定がそのまま文字列として処理されてしまう。
57
+ </html>
58
+
36
-
59
+ ```
37
-
38
-
60
+
39
- 【index.html】
61
+ 【replace.html】
40
62
 
41
63
  ```html
42
64
 
43
- <html xmlns="http://www.w3.org/1999/xhtml"
65
+ <!DOCTYPE html>
44
-
66
+
45
- xmlns:th="http://www.thymeleaf.org"
67
+ <html xmlns:th="http://www.thymeleaf.org">
68
+
46
-
69
+ <head>
70
+
47
- xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
71
+ <meta charset="UTF-8"/>
48
-
72
+
49
- <head></head>
73
+ <title></title>
74
+
75
+ </head>
50
76
 
51
77
  <body>
52
78
 
79
+ <select id="id1" name="id1" th:fragment="flgmntB"> <!--★これが置き換わる★-->
80
+
81
+ <option value="">------------------------------------</option>
82
+
53
- <input type="text" id="ss1" />
83
+ <option th:each="item : ${selectLst}"
54
-
55
- <input type="text" id="ss2" />
84
+
56
-
57
- <input type="text" id="ss3" />
58
-
59
- <table>
60
-
61
- <tr>
62
-
63
- <td><div>選択肢</div></td>
64
-
65
- <td id="tdid">
85
+ th:value="${item.value}"
66
-
86
+
67
- <div th:replace="replace :: flgmntB"></div>
87
+ th:selected="${item.value == id1}" th:inline="text">[[${item.key}]]
68
-
88
+
69
- </td>
89
+ </option>
70
-
71
- </tr>
90
+
72
-
73
- </table>
91
+ </select>
74
92
 
75
93
  </body>
76
94
 
@@ -78,54 +96,12 @@
78
96
 
79
97
  ```
80
98
 
81
- 【replace.html】
82
-
83
- ```html
84
-
85
- <!DOCTYPE html>
86
-
87
- <html xmlns:th="http://www.thymeleaf.org">
88
-
89
- <head>
90
-
91
- <meta charset="UTF-8"/>
92
-
93
- <title></title>
94
-
95
- </head>
96
-
97
- <body>
98
-
99
- <select id="id1" name="id1" th:fragment="flgmntB">
100
-
101
- <option value="">------------------------------------</option>
102
-
103
- <option th:each="item : ${selectLst}"
104
-
105
- th:value="${item.value}"
106
-
107
- th:selected="${item.value == id1}" th:inline="text">[[${item.key}]]
108
-
109
- </option>
110
-
111
- </select>
112
-
113
- </body>
114
-
115
- </html>
116
-
117
- ```
118
-
119
99
  【js】
120
100
 
121
101
  ```JavaScript
122
102
 
123
103
  $('input').change(function() {
124
104
 
125
- $('#tdid').html('<div th:replace="replace :: flgmntB" th:fragment="flgmntA"></div>');
126
-
127
-
128
-
129
105
  event.preventDefault();
130
106
 
131
107
  var dataWhere = {
@@ -152,7 +128,7 @@
152
128
 
153
129
  success : function(data, status, xhr) {
154
130
 
155
- $('#tdid').html(data);
131
+ $('#tdid').html(data); // ★data="index :: flgmntA"
156
132
 
157
133
  },
158
134
 
@@ -198,7 +174,7 @@
198
174
 
199
175
  　　　　mav.setViewName("index");
200
176
 
201
- 　　　　mav.addObject("selectLst", map);
177
+ 　　　　mav.addObject("selectLst", map); // ★プルダウンの中身★
202
178
 
203
179
  　　　　return mav;
204
180
 
@@ -232,9 +208,9 @@
232
208
 
233
209
 
234
210
 
235
- model.addAttribute("selectLst", map);
211
+ model.addAttribute("selectLst", map); // ★プルダウンの中身★
236
-
212
+
237
- return "index :: flgmntA";
213
+ return "index :: flgmntA"; // ★置換指示★
238
214
 
239
215
 
240
216
 
@@ -258,6 +234,8 @@
258
234
 
259
235
  [Spring(Java) + Thymeleaf でページの一部更新(Ajax)](https://qiita.com/yoyoyo/items/b288f067d5de04f26046)
260
236
 
237
+ （類似のサイトも複数参考にさせていただきました）
238
+
261
239
 
262
240
 
263
241
  初期表示はうまくいっており、初期表示用に送り出したListの内容がプルダウンになって
@@ -276,7 +254,7 @@
276
254
 
277
255
  jsの$('#tdid').html(data);の実行結果は
278
256
 
279
- <td id="tdid">index :: flgmntA</td>と、contorollerから送った文字列が画面に表示されるばかりです。
257
+ <td id="tdid">index :: flgmntA</td>となり、contorollerから送った文字列が画面に表示されるばかりです。
280
258
 
281
259
 
282
260
 

12

タグ追加

2019/11/01 05:03

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
File without changes

11

文章を修正してみました。

2019/11/01 00:48

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -10,12 +10,32 @@
10
10
 
11
11
 
12
12
 
13
- htmlには<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">　と記述しているのですが、表示された画面のソースを見ると<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">　と、thymeleaf.orgが消えてしまっています。
13
+ htmlには
14
+
15
+ <html xmlns="http://www.w3.org/1999/xhtml"
16
+
17
+ xmlns:th="http://www.thymeleaf.org"
18
+
19
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">　
20
+
21
+ と記述しているのですが、表示された画面のソースを見ると
22
+
23
+ <html xmlns="http://www.w3.org/1999/xhtml"
24
+
25
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">　
26
+
27
+ と、thymeleaf.orgが消えてしまっています。
14
28
 
15
29
  それが原因かはわかりませんが。
16
30
 
17
31
 
18
32
 
33
+ 期待値は、thymeleafのテンプレートフラグメントという機能によって、指定した場所にプルダウンが構築されることですが、
34
+
35
+ 実際は、（おそらく）thymeleafを通らずhtmlで処理されてしまい、"index :: flgmntA"という指定がそのまま文字列として処理されてしまう。
36
+
37
+
38
+
19
39
  【index.html】
20
40
 
21
41
  ```html
@@ -240,11 +260,23 @@
240
260
 
241
261
 
242
262
 
263
+ 初期表示はうまくいっており、初期表示用に送り出したListの内容がプルダウンになって
264
+
243
- 初期表示はうまくいっており、初期表示用に送り出したListの内容がプルダウンになってindex.htmlの<div th:replace="replace :: flgmntB"></div>の箇所に表示されています。
265
+ index.htmlの<div th:replace="replace :: flgmntB"></div>
266
+
244
-
267
+ の箇所に表示されています。
268
+
269
+ また、
270
+
245
- また、index.htmlの<input type="text" id="ss1" />などに入力した値はcontorollerに送られ、それによる検索結果がModelMapにセットされているところまでは確認できています。
271
+ index.htmlの<input type="text" id="ss1" />などに入力した値はcontorollerに送られ、
272
+
246
-
273
+ それらによる検索結果がModelMapにセットされているところまでは確認できています。
274
+
275
+ ですが、
276
+
277
+ jsの$('#tdid').html(data);の実行結果は
278
+
247
- ですが、jsの$('#tdid').html(data);の実行結果は<td id="tdid">index :: flgmntA</td>と、contorollerから送った文字が画面に表示されるばかりです。
279
+ <td id="tdid">index :: flgmntA</td>と、contorollerから送った文字列が画面に表示されるばかりです。
248
280
 
249
281
 
250
282
 

10

書式

2019/10/31 08:07

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -16,10 +16,10 @@
16
16
 
17
17
 
18
18
 
19
+ 【index.html】
20
+
19
21
  ```html
20
22
 
21
- 【index.html】
22
-
23
23
  <html xmlns="http://www.w3.org/1999/xhtml"
24
24
 
25
25
  xmlns:th="http://www.thymeleaf.org"
@@ -58,10 +58,10 @@
58
58
 
59
59
  ```
60
60
 
61
+ 【replace.html】
62
+
61
63
  ```html
62
64
 
63
- 【replace.html】
64
-
65
65
  <!DOCTYPE html>
66
66
 
67
67
  <html xmlns:th="http://www.thymeleaf.org">
@@ -96,6 +96,8 @@
96
96
 
97
97
  ```
98
98
 
99
+ 【js】
100
+
99
101
  ```JavaScript
100
102
 
101
103
  $('input').change(function() {
@@ -146,10 +148,10 @@
146
148
 
147
149
  ```
148
150
 
151
+ 【Controller】
152
+
149
153
  ```java
150
154
 
151
- 【Controller】
152
-
153
155
  @RestController
154
156
 
155
157
  public class TLController {

9

コピペで使えるかは難しいですが、いくらか増量しました。

2019/10/31 07:22

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -22,33 +22,39 @@
22
22
 
23
23
  <html xmlns="http://www.w3.org/1999/xhtml"
24
24
 
25
- xmlns:th="http://www.thymeleaf.org"
25
+ xmlns:th="http://www.thymeleaf.org"
26
-
26
+
27
- xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
27
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
28
+
28
-
29
+ <head></head>
30
+
29
- （略）
31
+ <body>
30
-
32
+
31
- <input type="text" id="ss1" />
33
+ <input type="text" id="ss1" />
32
-
34
+
33
- <input type="text" id="ss2" />
35
+ <input type="text" id="ss2" />
34
-
36
+
35
- <input type="text" id="ss3" />
37
+ <input type="text" id="ss3" />
36
-
38
+
37
- <table>
39
+ <table>
38
40
 
39
41
  <tr>
40
42
 
41
- <td><div>選択肢</div></td>
43
+ <td><div>選択肢</div></td>
42
-
44
+
43
- <td id="tdid">
45
+ <td id="tdid">
44
-
46
+
45
- <div th:replace="replace :: flgmntB"></div>
47
+ <div th:replace="replace :: flgmntB"></div>
46
-
48
+
47
- </td>
49
+ </td>
48
50
 
49
51
  </tr>
50
52
 
51
- </table>
53
+ </table>
54
+
55
+ </body>
56
+
57
+ </html>
52
58
 
53
59
  ```
54
60
 
@@ -126,14 +132,12 @@
126
132
 
127
133
  $('#tdid').html(data);
128
134
 
135
+ },
136
+
137
+ error : function(XMLHttpRequest, textStatus, errorThrown) {
138
+
129
139
  （略）
130
140
 
131
- },
132
-
133
- error : function(XMLHttpRequest, textStatus, errorThrown) {
134
-
135
- （略）
136
-
137
141
  }
138
142
 
139
143
  });
@@ -146,31 +150,79 @@
146
150
 
147
151
  【Controller】
148
152
 
153
+ @RestController
154
+
155
+ public class TLController {
156
+
157
+
158
+
159
+ // 初期表示
160
+
161
+ @RequestMapping(value = "/", method = RequestMethod.GET)
162
+
163
+ public ModelAndView index(ModelAndView mav) {
164
+
165
+ // 初期表示のMap
166
+
167
+ Map<String, String> map = new LinkedHashMap<String, String>();
168
+
169
+ map.put("key1", "value1");
170
+
171
+ map.put("key2", "value2");
172
+
173
+ map.put("key3", "value3");
174
+
175
+
176
+
177
+ 　　　　mav.setViewName("index");
178
+
179
+ 　　　　mav.addObject("selectLst", map);
180
+
181
+ 　　　　return mav;
182
+
183
+ }
184
+
185
+
186
+
187
+ // 絞り込み検索
188
+
149
- @RequestMapping(value = "contrMthd", consumes = MediaType.APPLICATION_JSON_VALUE)
189
+ @RequestMapping(value = "contrMthd", consumes = MediaType.APPLICATION_JSON_VALUE)
150
-
190
+
151
- public String pulldown(@RequestBody String data, ModelMap model) {
191
+ public String pulldown(@RequestBody String data, ModelMap model) {
152
-
153
-
154
-
192
+
193
+
194
+
155
- ObjectMapper mapper = new ObjectMapper();
195
+ ObjectMapper mapper = new ObjectMapper();
156
-
196
+
157
- try {
197
+ try {
158
-
198
+
159
- Map<String, String> whr = mapper.readValue(data, new TypeReference<HashMap<String, String>>() {
199
+ Map<String, String> whr = mapper.readValue(data, new TypeReference<HashMap<String, String>>() {
160
-
200
+
161
- });
201
+ });
202
+
162
-
203
+ // whrで検索したつもりのMap
204
+
205
+ Map<String, String> map = new LinkedHashMap<String, String>();
206
+
207
+ map.put("key1", "value1");
208
+
209
+ map.put("key2", "value2");
210
+
211
+
212
+
163
- model.addAttribute("selectLst", whrでの検索結果Map);
213
+ model.addAttribute("selectLst", map);
164
-
214
+
165
- return "index :: flgmntA";
215
+ return "index :: flgmntA";
166
-
167
-
168
-
216
+
217
+
218
+
169
- } catch (Exception e) {
219
+ } catch (Exception e) {
170
-
220
+
171
- （略）
221
+ e.printStackTrace();
172
-
222
+
173
- }
223
+ }
224
+
225
+ }
174
226
 
175
227
  }
176
228
 

8

書式

2019/10/31 07:08

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -144,7 +144,7 @@
144
144
 
145
145
  ```java
146
146
 
147
- Controller
147
+ 【Controller】
148
148
 
149
149
  @RequestMapping(value = "contrMthd", consumes = MediaType.APPLICATION_JSON_VALUE)
150
150
 

7

書式

2019/10/31 06:24

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  ```html
20
20
 
21
- index.html
21
+ 【index.html】
22
22
 
23
23
  <html xmlns="http://www.w3.org/1999/xhtml"
24
24
 
@@ -52,9 +52,9 @@
52
52
 
53
53
  ```
54
54
 
55
- ```
55
+ ```html
56
-
56
+
57
- replace.html
57
+ 【replace.html】
58
58
 
59
59
  <!DOCTYPE html>
60
60
 
@@ -142,7 +142,7 @@
142
142
 
143
143
  ```
144
144
 
145
- ```
145
+ ```java
146
146
 
147
147
  Controller
148
148
 

6

書式

2019/10/31 06:23

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- ```
19
+ ```html
20
20
 
21
21
  index.html
22
22
 

5

書式

2019/10/31 06:22

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -90,9 +90,7 @@
90
90
 
91
91
  ```
92
92
 
93
- ```
93
+ ```JavaScript
94
-
95
- js
96
94
 
97
95
  $('input').change(function() {
98
96
 

4

書式

2019/10/31 06:21

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
File without changes

3

書式

2019/10/31 06:18

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,9 @@
16
16
 
17
17
 
18
18
 
19
+ ```
20
+
19
- ```index.html
21
+ index.html
20
22
 
21
23
  <html xmlns="http://www.w3.org/1999/xhtml"
22
24
 

2

書式

2019/10/31 06:16

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -16,13 +16,13 @@
16
16
 
17
17
 
18
18
 
19
- ```
20
-
21
- index.html
19
+ ```index.html
22
-
20
+
23
- <html xmlns="http://www.w3.org/1999/xhtml"
21
+ <html xmlns="http://www.w3.org/1999/xhtml"
24
-
22
+
25
- xmlns:th="http://www.thymeleaf.org">
23
+ xmlns:th="http://www.thymeleaf.org"
24
+
25
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
26
26
 
27
27
  （略）
28
28
 

1

書式変更中（いったん保存）

2019/10/31 06:15

投稿

tohmey
tohmey

スコア10

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,9 @@
16
16
 
17
17
 
18
18
 
19
+ ```
20
+
19
- ### index.html
21
+ index.html
20
22
 
21
23
  <html xmlns="http://www.w3.org/1999/xhtml"
22
24
 
@@ -46,9 +48,11 @@
46
48
 
47
49
  </table>
48
50
 
49
-
51
+ ```
52
+
50
-
53
+ ```
54
+
51
- ### replace.html
55
+ replace.html
52
56
 
53
57
  <!DOCTYPE html>
54
58
 
@@ -82,9 +86,11 @@
82
86
 
83
87
  </html>
84
88
 
85
-
89
+ ```
90
+
86
-
91
+ ```
92
+
87
- ### js
93
+ js
88
94
 
89
95
  $('input').change(function() {
90
96
 
@@ -134,9 +140,11 @@
134
140
 
135
141
  });
136
142
 
137
-
143
+ ```
144
+
138
-
145
+ ```
146
+
139
- ### Controller
147
+ Controller
140
148
 
141
149
  @RequestMapping(value = "contrMthd", consumes = MediaType.APPLICATION_JSON_VALUE)
142
150
 
@@ -166,7 +174,7 @@
166
174
 
167
175
  }
168
176
 
169
-
177
+ ```
170
178
 
171
179
  ### 試したこと
172
180
 
@@ -174,7 +182,7 @@
174
182
 
175
183
  ※こちらのサイトを参考にさせていただきました。
176
184
 
177
- https://qiita.com/yoyoyo/items/b288f067d5de04f26046
185
+ [Spring(Java) + Thymeleaf でページの一部更新(Ajax)](https://qiita.com/yoyoyo/items/b288f067d5de04f26046)
178
186
 
179
187
 
180
188