2

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

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

否则一切正常。模式打开，但没有更新其 html。

理想情况下，我希望像这样解决这个问题：

1) 模态打开

2) Ajax 请求

3) Modal的html更新

我使用百里香作为我的模板引擎。

主控制器.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>

汽车查看器.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>
4

2 回答 2

0

你想要什么和你拥有什么之间存在脱节。例如：

在您的模态中，您有许多表达方式，例如：${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");
    }
  });
}
于 2018-09-10T21:26:49.977 回答
0

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

@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");
    }
  });
}
于 2018-09-11T14:40:49.533 回答