Question

我正在尝试动态填充模式。

首先，我通过AJAX发出GET请求，并在其中发送所需对象的ID。然后，我尝试更新我的模型属性，以便可以拥有所需的对象。这就是所有失败的地方。我无法更新模型的属性。

否则，一切正常。该模式会打开，但它的html不会更新。

理想情况下，我希望这样解决：

1）模态打开

2）Ajax请求

3）Modal的html已更新

我正在使用Thymyleaf作为模板引擎。

MainController.java

@RequestMapping("/main")
public String main(Model model)
{

    model.addAttribute("allVehicles", allVehicles);
    model.addAttribute("selectedCar", new Car());

    return "main";
}

@RequestMapping("/car/{id}")
@ResponseStatus(value = HttpStatus.OK)
public void car(@PathVariable("id") String id, Model model)
{
    Car car = updateCarById(id);
    model.asMap().replace("selectedCar", car);
}

main.html

...
<div th:each="vehicle : ${allVehicles}">    
    <div th:each="car : ${vehicles.allCars}">
        <a th:onclick="'javascript:openModal(\'' + ${car.id} + '\');'">
        </a>
    </div>|
</div>
...
<script th:src="@{/js/car-viewer.js}"></script>

car-viewer.js

function openModal(id)
{
  $.ajax
  ({
      url: "/car/" + id,
      success: function (data) {
          $("#carViewModal").modal("show");
      }
  });
}

carModalFragment.html

<div th:fragment="carModalFragment">
<div class="modal fade" id="carModal" tabindex="-1" role="dialog" aria-labelledby="carModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="carModalLabel" th:text="${selectedCar.name}"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" th:text="${selectedCar.cost}"></span>
                </button>
            </div>
            ...
        </div>
    </div>
</div>
</div>

Answer 1

您在这里想要的和所拥有的之间没有联系。例如：

在模态中，您有许多表达式，例如：${selectedCar.name}。在控制器中，您正在设置model.addAttribute("selectedCar", new Car());，这意味着您使用${selectedCar}的任何表达式都将仅使用空白对象。

在ajax中，您正在调用以下URL：url: "/car/" + id,。该URL的控制器不会返回任何数据，而只是将重定向return "redirect:/main";返回到另一个页面。（而且JavaScript仍然不会对返回值做任何事情，只是显示模式。）

我认为最简单的解决方法是：

在主控制器中，对其进行更改以返回被选中的汽车：

@ResponseBody
@RequestMapping("/car/{id}")
public Car car(@PathVariable("id") String id, Model model) {
    Car car = null;
    // car = findCarById(id); <-- implement this
    return car;
}

然后，更改ajax以设置返回的属性。

function openModal(id) {
  $.ajax({
    url: "/car/" + id,
    success: function (data) {
      // Here, you should update the html with your selected car attributes
      $('#carModalLabel').text(data.name);
      $("#carViewModal").modal("show");
    }
  });
}

Answer 2

尝试将这些添加到您的控制器中。

@RequestMapping("/main")
public String main(Model model)
{
    model.addAttribute("allVehicles", allVehicles);
    model.addAttribute("selectedCar", new Car());
    return "main";
}

@RequestMapping("/car/{id}")
@ResponseStatus(value = HttpStatus.OK)
public String getCarView(@PathVariable("id") String id, Model model)
{
    Car car = updateCarById(id);
    model.addAttribute("selectedCar", car);
    return "../pathToHtml/carModalFragment :: carModalFragment";
}

然后在下面更改您的.js文件，

function openModal(id) {
  $.ajax({
    url: "/car/" + id,
    success: function (response) {
      $("#carViewModal").empty().append(response);
      $("#carViewModal").modal("show");
    }
  });
}

如何动态地将对象传递给模态

2 个答案: