前提・実現したいこと
[Spring Boot+thymleaf] プルダウンの中身だけを更新したい
発生している問題・エラーメッセージ
期待値は、thymeleafのテンプレートフラグメントという機能によって、指定した場所にプルダウンが再構築されることですが、
実際は、(おそらく)thymeleafを通らずhtmlで処理されてしまっており、"index :: flgmntA"という指定がそのまま文字列として画面に表示されてしまう。
【index.html】(メイン画面)
html
1<html xmlns="http://www.w3.org/1999/xhtml" 2 xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 4<head></head> 5<body> 6 <input type="text" id="ss1" /> <!--☆検索条件☆--> 7 <input type="text" id="ss2" /> <!--☆検索条件☆--> 8 <input type="text" id="ss3" /> <!--☆検索条件☆--> 9 <table> 10 <tr> 11 <td><div>選択肢</div></td> 12 <td id="tdid"> 13 <div th:replace="replace :: flgmntB" th:fragment="flgmntA"></div> <!--★ここに置き換わる★--> 14 </td> 15 </tr> 16 </table> 17</body> 18</html>
【replace.html】
html
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4 <meta charset="UTF-8"/> 5 <title></title> 6</head> 7<body> 8 <select id="id1" name="id1" th:fragment="flgmntB"> <!--★これが置き換わる★--> 9 <option value="">------------------------------------</option> 10 <option th:each="item : ${selectLst}" 11 th:value="${item.value}" 12 th:selected="${item.value == id1}" th:inline="text">[[${item.key}]] 13 </option> 14 </select> 15</body> 16</html>
【js】
JavaScript
1$('input').change(function() { 2 event.preventDefault(); 3 var dataWhere = { 4 "s1" : $("#ss1").val(), 5 "s2" : $("#ss2").val(), 6 "s3" : $("#ss3").val(), 7 }; 8 $.ajax({ 9 type : "POST", 10 url : /* [[@{/contrMthd}]] */'/contrMthd', 11 dataType : "html", 12 data : JSON.stringify(dataWhere), 13 contentType : 'application/json', 14 success : function(data, status, xhr) { 15 $('#tdid').html(data); // ★data="index :: flgmntA" 16 }, 17 error : function(XMLHttpRequest, textStatus, errorThrown) { 18 (略) 19 } 20 }); 21});
【Controller】
java
1@RestController 2public class TLController { 3 4 // 初期表示 5 @RequestMapping(value = "/", method = RequestMethod.GET) 6 public ModelAndView index(ModelAndView mav) { 7 // 初期表示のMap 8 Map<String, String> map = new LinkedHashMap<String, String>(); 9 map.put("key1", "value1"); 10 map.put("key2", "value2"); 11 map.put("key3", "value3"); 12 13 mav.setViewName("index"); 14 mav.addObject("selectLst", map); // ★プルダウンの中身★ 15 return mav; 16 } 17 18 // 絞り込み検索 19 @RequestMapping(value = "contrMthd", consumes = MediaType.APPLICATION_JSON_VALUE) 20 public String pulldown(@RequestBody String data, ModelMap model) { 21 22 ObjectMapper mapper = new ObjectMapper(); 23 try { 24 Map<String, String> whr = mapper.readValue(data, new TypeReference<HashMap<String, String>>() { 25 }); 26 // whrで検索したつもりのMap 27 Map<String, String> map = new LinkedHashMap<String, String>(); 28 map.put("key1", "value1"); 29 map.put("key2", "value2"); 30 31 model.addAttribute("selectLst", map); // ★プルダウンの中身★ 32 return "index :: flgmntA"; // ★置換指示★ 33 34 } catch (Exception e) { 35 e.printStackTrace(); 36 } 37 } 38}
試したこと
※こちらのサイトを参考にさせていただきました。
Spring(Java) + Thymeleaf でページの一部更新(Ajax)
(類似のサイトも複数参考にさせていただきました)
初期表示はうまくいっており、初期表示用に送り出したListの内容がプルダウンになって
index.htmlの<div th:replace="replace :: flgmntB"></div>
の箇所に表示されています。
また、
index.htmlの<input type="text" id="ss1" />などに入力した値はcontorollerに送られ、
それらによる検索結果がModelMapにセットされているところまでは確認できています。
ですが、
jsの$('#tdid').html(data);の実行結果は
試したこと2
$('#tdid').html(data); を、
$('#tdid').html('<div th:replace="replace :: flgmntB"></div>'); と、
直接タグを送り込むなどもしましたが、何も表示されない(replace :: flgmntBが働かないのでdivがカラ)だけでした。とにかくThymeleafがどこにもいない。という感じです。
補足情報(FW/ツールのバージョンなど)
thymeleaf 3.0.11.RELEASE
(環境構築した者が現場にはすでに居らず、thymeleafを初めて触る者しか居りません…)
コードの書き方の問題というよりは、表示後の画面においてthymeleafが有効にならないことが問題なのでは、と、現時点では思っております。そのため、
https://teratail.com/questions/220606
https://teratail.com/questions/220621
といった質問もさせていただいております。
あわせてよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー