如何将'@GetMapping'模型属性返回给BootStrap模态?

时间:2019-12-30 21:59:40

标签: javascript java ajax spring-boot thymeleaf

目标:将Thymeleaf的枚举值集作为每个循环中的复选框。 问题:Bootstrap模式是JS中实现/访问的事件日历的一部分。当用户单击日单元格时,模态会打开,但是 @GetMapping 中的 return 语句不会将模型属性返回到模态。 已测试:在没有Bootstrap模式(直接在HTML文件上)的情况下有效,但在模式下则无效。 假设:GetMapping Spring控制器中的“返回”响应HTML文件而不响应模态,因为模态在打开时位于HTML文件上方一层。我想只能通过JS / Ajax访问。 有什么能帮助您的优秀程序员吗?

控制器

(...)

@GetMapping("/getEvent")
public String getEvent(Model theModel) {
    theModel.addAttribute("event", new Event());  
    theModel.addAttribute("serviceLayers", EnumServiceLayers.values()); 
    return "views/kalender";
}

@PostMapping("/saveEvent")
public String saveEvent(@RequestParam(value = "date") String date){
    eventService.saveEvent(date);
    return "redirect:/eventController/showCalendar";
}

HTML -*注意:Event类具有枚举类 EnumServiceLayers 的列表字段,因此没有 th:object =“ $ {enumServiceLayers}”“ 是必需的,只有model属性。

<div class="myForm">
    <form th:action="@{/eventController/saveEvent}" th:object="${event}" method="POST">

    (...)

    <!--Model attribute 'serviceLayers' is used only within <ul> in the whole form -->
    <ul>
        <li th:each="service : ${serviceLayers}">
            <label th:text="${service}"></label>
            <input type="checkbox" th:field="*{enumServiceLayers}" th:value="${service}">       
        </li>
    </ul>

    (...)

JS / Ajax

i。该语句每天都会添加一个事件侦听器-该侦听器工作正常:这里没有问题。就像洞察力一样。

(...)

day_element.addEventListener('click', function() {addDayEvt(year, month, day);});

(...)

ii。模态是在JS中处理的-也许可以在其中传递model属性,那么模态是否被模态捕获了?

//DAY CELL EVENT LISTENER
function addDayEvt(ayear, amonth, aday){

   // Uncheck check-boxes
   showUnchecked(); 
   selectedDate = formatDate(ayear, amonth, aday);

   //alert(selectedDate);
   if (!(aday < today.getDate()) && !((amonth+1) < (today.getMonth()+1)) || (ayear > today.getFullYear())) {

      //Call @GetMapping in Spring controller?          
      $.ajax({
         type: 'GET',
         url: '/eventController/getEvent',
         dataType: 'json'
      });

      $('.myForm #date').val(selectedDate); //date field
      $('.myForm #exampleModal').modal(); //opens modal
   }
} //END DAY CELL EVENT LISTENER

非常感谢您

Murilo

0 个答案:

没有答案