title: Load Data in Modal with Ajax from Spring Controller
body: <p>I just started with Spring two month ago and never did Ajax or JavaScript before. So i'm pretty new to this. What i want to do is load data from a GET Method in my Controller to populate this into a modal. I'm using ajax for this. Basicly i did what this guy <a href="https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/" rel="nofollow noreferrer">https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/</a> is doing. But it's not working.</p>
  
  <p>Hope somebody can help me with this.</p>
  
  <p>Here is my Controller:</p>
  
  <pre><code>@RequestMapping(path="/reservations/details/{reservationId}", method=RequestMethod.GET)
  public @ResponseBody String getReservationDetails(@PathVariable("reservationId") String reservationId, Model model, Principal principal, HttpServletRequest request){
      LOGGER.info(LogUtils.getDefaultInfoStringWithPathVariable(request, Thread.currentThread().getStackTrace()[1].getMethodName(), " reservationId ", reservationId.toString()));
  
      User authenticatedUser = (User) ((Authentication) principal).getPrincipal();
      if(authenticatedUser.getAdministratedRestaurant() == null) {
          LOGGER.error(LogUtils.getErrorMessage(request, Thread.currentThread().getStackTrace()[1].getMethodName(), "The user " + authenticatedUser.getUsername() + " has no restaurant. A restaurant has to be added before offers can be selected."));
          return null;
      }
  
      Reservation reservation = reservationRepository.findOne(Integer.parseInt(reservationId));
      if(reservation == null){
          return null;
      }
      List&lt;ReservationOffers&gt; reservationOffers = reservation.getReservation_offers();
      if(reservationOffers == null){
          return null;
      }
      model.addAttribute("offers", reservationOffers);
  
      return "reservations :: reservationTable";
  
  }
  </code></pre>
  
  <p>This is the button which calls the JavaScript within the "reservation.html"</p>
  
  <pre><code>&lt;button type="button" class="btn btn-success" th:onclick="'javascript:openReservationModal(\''+*{reservations[__${stat.index}__].id}+'\');'"&gt;
                          &lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;/button&gt;
  </code></pre>
  
  <p>Here is the modal I want to show:</p>
  
  <pre><code>    &lt;div id="reservationModal" class="modal fade" role="dialog" th:fragment="reservationTable"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title" th:text="'Reservation Details'"&gt;Modal Header&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;table class="table table-hover" id="reservationTable"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;td th:text="'Name'"&gt;&lt;/td&gt;
                              &lt;td th:text="'Amount'"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr th:each="offer : ${offers}"&gt;
                              &lt;td th:text="${offer.getOffer().getTitle()}"&gt;&lt;/td&gt;
                              &lt;td th:text="${offer.getAmount()}"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There is a empty div in my reservation.html</p>
  
  <pre><code>&lt;div id="modalHolder"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And there is the JavaScript with Ajax:</p>
  
  <pre><code>&lt;script th:inline="javascript" type="text/javascript"&gt;
  
  function openReservationModal(id) {
  
  
      $.ajax({
          url: "/reservations/details/"+id,
          success: function(data) {
              console.log(data);
              $("#modalHolder").html(data);
              $("#reservationModal").modal("show");
              }
          });
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you guys!</p>
  
  <p>EDIT:
  Here is the Table which contains the button:</p>
  
  <pre><code>&lt;form action="#" th:object="${wrapper}" method="post"&gt;
      &lt;div style="height: 190px; overflow: auto;"&gt;
          &lt;table class="table table-hover" id="reservationTable"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th th:text="#{reservations.label.oderId}"&gt;Id&lt;/th&gt;
                      &lt;th th:text="#{reservations.label.customername}"&gt;name&lt;/th&gt;
                      &lt;th th:text="#{reservations.label.datetime}"&gt;date with time&lt;/th&gt;
                      &lt;th th:text="#{reservations.label.price}"&gt;price&lt;/th&gt;
                      &lt;th th:text="#{reservations.label.donation}"&gt;customer donation&lt;/th&gt;
                      &lt;th th:text="#{reservations.label.priceWithDonation}"&gt;price included with Donation&lt;/th&gt;
                      &lt;!-- &lt;th th:text="#{reservations.label.confirmed}"&gt;finished reservation&lt;/th&gt; --&gt;
                      &lt;!-- &lt;th th:text="#{reservations.label.isfree}"&gt;free reservation&lt;/th&gt; --&gt;
                      &lt;th th:text="#{reservations.label.choice}"&gt;reservation selection&lt;/th&gt;
                      &lt;th th:text="#{reservations.label.details}"&gt;reservation details&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
                  &lt;tr th:each="reservation, stat: *{reservations}"&gt;               
                      &lt;div th:switch="${reservation.isUsedPoints()}"&gt;
                          &lt;div th:case="false"&gt;
                              &lt;td th:text="${reservation.getReservationNumber()}"&gt;&lt;/td&gt;
                              &lt;td th:text="${reservation.getUser().getUsername()}"&gt;&lt;/td&gt;
                              &lt;td th:text="${#dates.format(reservation.reservationTime, 'HH:mm')}"&gt;&lt;/td&gt; 
                              &lt;td&gt;&lt;span th:text="${#numbers.formatDecimal(reservation.getTotalPrice(), 1, 'POINT', 2, 'COMMA')}"&gt; &lt;/span&gt; &amp;euro;&lt;/td&gt;
                              &lt;td&gt;&lt;span th:text="${#numbers.formatDecimal(reservation.getDonation(), 1, 'POINT', 2, 'COMMA')}"&gt; &lt;/span&gt; &amp;euro;&lt;/td&gt;
                              &lt;td&gt;&lt;span th:text="${#numbers.formatDecimal(reservation.getDonation() + reservation.getTotalPrice(), 1, 'POINT', 2, 'COMMA')}"&gt; &lt;/span&gt; &amp;euro;&lt;/td&gt;
                              &lt;!-- &lt;td th:text="${reservation.isConfirmed()}"&gt;&lt;/td&gt; --&gt;
                              &lt;!-- &lt;td th:text="${reservation.isUsedPoints()}" &gt;&lt;/td&gt; --&gt;
                              &lt;td&gt;
                                  &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].id}" /&gt;
                                  &lt;input type="checkbox" th:field="*{reservations[__${stat.index}__].confirmed}"/&gt;
                                  &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].rejected}" /&gt;
                                  &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].donation}"/&gt;
                                  &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].totalPrice}"/&gt;
                                  &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].usedPoints}"/&gt;
                              &lt;/td&gt;           
                          &lt;/div&gt;
                           &lt;div th:case="true"&gt;
                          &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].id}" /&gt; 
                          &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].confirmed}" /&gt;
                          &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].rejected}" /&gt;  
                          &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].donation}"/&gt;
                          &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].totalPrice}"/&gt;
                          &lt;input type="hidden" th:field="*{reservations[__${stat.index}__].usedPoints}"/&gt;
                      &lt;/div&gt;
                      &lt;td&gt;
                      &lt;button type="button" class="btn btn-success" th:onclick="'javascript:openReservationModal(\''+*{reservations[__${stat.index}__].id}+'\');'"&gt;
                          &lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;/td&gt;
                      &lt;/div&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-success" th:text="#{reservations.button.confirm}" name="confrim" style="float: right; margin-right: 25px;"&gt;&lt;/button&gt;
          &lt;button type="reject" class="btn btn-success" th:text="#{reservations.button.reject}" name="reject" style="float: right; margin-right: 25px;"&gt;&lt;/button&gt;
          &lt;input type="hidden"
              th:name="${_csrf.parameterName}"
              th:value="${_csrf.token}" /&gt;
      &lt;/form&gt;
  </code></pre>