Контент не обновляется автоматически с помощью Thymeleaf и выписки, если не работает

Question

Я пытаюсь сделать пост-запрос и автоматически обновить список содержимого без обновления страницы.

С текущим кодом строка правильно создается в базе данных. Но чтобы увидеть новый предмет, мне нужно обновить страницу.

Моя цель - отобразить модальный режим, если вставка в порядке, сообщение об ошибке, если вставка выполнена в ko, и автоматически обновить список новым элементом.

Однако без обновления содержимое не отображается. Кроме того, модал, используемый, чтобы сказать "Вставить ОК", также не отображается (то же самое для сообщения об ошибке, когда вставка - ko).

Так вы можете сказать мне, что я сделал не так, и помочь мне исправить это?

Большое спасибо!

HTML

<div th:if="${#response.status == 201}" class="modal fade modal-success" id="newreservation-success" tabindex="-1" role="dialog" aria-labelledby="modalNewreservationSuccess" aria-hidden="true" data-keyboard="false" data-backdrop="static">
     <div class="modal-dialog" role="document">
           <div class="modal-content">
                 <div class="modal-header">
                      <h5 class="modal-title" id="modalNewreservationSuccess">Ajout d'une réservation</h5>
                 </div>
                 <div class="modal-body">
                      Réservation créée avec succès.
                 </div>
                 <div class="modal-footer">
                       <button type="button" class="btn btn-primary modal-success-ok" data-dismiss="modal">Valider</button>
                  </div>
           </div>
      </div>
 </div>

 <div th:if="${#response.status == 404 || #response.status == 406 || #response.status == 400}" id="newreservation-danger" class="alert alert-danger alert-dismissible fade show hide-alert" role="alert">
       Une erreur est survenue.
       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
  </div>

  ...

   <div class="col form-group">
        <label for="titreoeuvre-annulation">Titre de l'oeuvre*</label>
        <select id="titreoeuvre-annulation" class="form-control">
                <option th:each="oeuvre : ${oeuvres}"
                        th:value="${{oeuvre.getTitre()}}"
                        th:text="${oeuvre.getTitre()}">
                </option>
         </select>
  </div>

JS (запрос ajax)

function newEmprunt() {
    let data = {
        "idexemplaire": $("#idExemplaireNewEmprunt").val(),
        "idusager": $("#idUsagerNewEmprunt").val()
    };
    sendAjaxRequest('/emprunts', data, "POST");
}

Контроллер

@PostMapping
public ModelAndView newEmprunt(HttpEntity<String> infoEmprunt) throws IOException {
    boolean valid = true;
    ModelAndView modelAndView = new ModelAndView();
    String body = infoEmprunt.getBody();
    if(body == null) {
        valid = false;
        modelAndView.setStatus(HttpStatus.BAD_REQUEST);
    }
    JsonNode node = Tools.createObjectMapper().readTree(body);
    String idexemplaire = node.get("idexemplaire").asText();
    String idusager = node.get("idusager").asText();

    Optional<Exemplaire> exemplaire = exemplaireResource.findById(idexemplaire);
    Optional<Usager> usager = usagerResource.findById(idusager);
    if(!exemplaire.isPresent() || !usager.isPresent() || !usager.get().getActif()) {
        valid = false;
        modelAndView.setStatus(HttpStatus.NOT_FOUND);
    }

    Emprunt checkExemplaireDispo = empruntResource.getEmpruntByExemplaireAndStatut(exemplaire.get(), StatutEmprunt.EN_COURS);
    if(checkExemplaireDispo != null) {
        valid = false;
        modelAndView.setStatus(HttpStatus.NOT_ACCEPTABLE);
    }

    if(valid) {
        Emprunt emprunt = new Emprunt(usager.get(), exemplaire.get());
        empruntResource.save(emprunt);

        exemplaire.get().setDisponible(false);
        exemplaireResource.save(exemplaire.get());

        // on passe la reservation correpondante à l'emprunt à "terminée"
        Reservation reservation = reservationResource.getReservationByUsagerAndOeuvreAndStatut(usager.get(), exemplaire.get().getOeuvre(), StatutReservation.EN_COURS);
        if (reservation != null) {
            reservation.setStatut(StatutReservation.EN_COURS);
            reservationResource.save(reservation);
        }
    }
    modelAndView.addObject("emprunts", empruntResource.getEmpruntsByStatutEquals(StatutEmprunt.EN_COURS));
    modelAndView.setViewName("webapp/pages/emprunts");
    modelAndView.setStatus(HttpStatus.CREATED);
    return modelAndView;
}