Как динамически передать объект модальному - PullRequest
Новая
       9

Как динамически передать объект модальному

0 голосов
/ 08 сентября 2018

Я пытаюсь заполнить модально динамически.

Сначала я делаю GET-запрос через AJAX, в котором отправляю идентификатор нужного объекта. Затем я пытаюсь обновить атрибуты моей модели, чтобы получить желаемый объект. И здесь все терпят неудачу. Я не могу обновить атрибуты моей модели.

В остальном все работает хорошо. Модал открывается, но его HTML не обновляется.

В идеале я хотел бы, чтобы это было решено как:

1) Модал открывается

2) Ajax-запрос

3) 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>

машино-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>

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Попробуйте добавить их в свой контроллер. 

@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");
    }
  });
}
0 голосов
/ 11 сентября 2018

У вас есть разногласия между тем, что вы хотите, и тем, что у вас есть. Например:

В вашем модале есть много выражений, таких как: ${selectedCar.name}. В вашем контроллере вы устанавливаете model.addAttribute("selectedCar", new Car());, что означает, что любое выражение, в котором вы используете ${selectedCar}, будет просто использовать пустой объект.

В вашем ajax вы звоните по этому адресу: 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");
    }
  });
}
...