목적

선택 상자에서 선택한 내용에 따라 연결되는 목록을 동적으로 (화면을 다시로드하지 않고 부분적으로) 변경합니다.

환경

Spring Boot
Thymleaf
Kotlin

완성형 이미지

선택한 강좌에 따라 개최 시간이 바뀌는 예

방법

Thymleaf의 fragment를 이용해, 일부의 DOM만 렌더링 시킨다.
또한 선택 상자를 눌렀을 때의 요청에 대해서는 ajax를 사용합니다.

처리 흐름

View에서 selectBox 값 변경

ajax에서 post

Controller로 변경하고 싶은 부분만의 DOM를 돌려준다

프론트 측에서 Controller로부터받은 DOM과 해당 부분을 교환 (ajax의 응답 받는 부분)

상세

testview.html

<!-- 部分的にレンダリングしたい部分 -->
<div th:fragment="test-fragment"> 
  <label for="target">ご希望の時間帯 ※他の時間帯は、お問い合わせ欄に記載ください</label>
  <select id="target" th:field="*{course_id}" th:onchange="updateCourseDateList(this.value)">
    <option th:each="courseDate : ${courseDates}"
            th:value="${courseDate.id}"
            th:text="${courseDate.holding_date}"></option>
  </select>
</div>
.
.
.

<script type="text/javascript">
  function updateCourseDateList(selectedId) {
    url = '/updateCourseDate/' + selectedId;
    var targetElement = document.getElementById("target");

    $.ajax({
      method: 'POST',
      data: {},
      url: url
    }).then(
            function(data) {
              targetElement.outerHTML = data;
            },
            function() {
              alert("error");
            });
  }
</script>

testController

   @PostMapping("updateCourseDate/{selectedId}")
   fun updateCourseDateList(model: Model, @PathVariable(value= "selectedId") selectedId: Int): String {
        model.addAttribute("course_id",xxxx)
        model.addAttribute("courseDates", xxxxx)
        return "testview :: test-fragment"
// return 時に 部分的にレンダリングしたい部分のtest-fragmentを指定する
    }