목적

환경

완성형 이미지

방법

상세

<!-- 部分的にレンダリングしたい部分 -->
<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>

   @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を指定する
    }