컨트롤러에서 모달 페이지로 값 전달

Question

컨트롤러에서 모달 페이지로 데이터를 전달하려고합니다. 이 링크를

: https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/

첫째 : 컨트롤러에서 간단한 방법은 데이터베이스

@PostMapping("/showarea") 
    public String areaModel(Model model) { 
     LOG.info("/showarea"); 

     List<Zona> zonas = zonaService.findAll(); 

     model.addAttribute("area", zonas.get(0).getNom_ZONA()); 
     LOG.info("area: " + zonas.get(0).getNom_ZONA()); 

     return "modal::modalContents"; 
    } 

쿼리하는 내 모델에서 지역을 넣어.

둘째 : 텍스트를 추가 할 수 https://v4-alpha.getbootstrap.com/components/modal/#modal-components

: 나는에서 예를 사용했다.

<button type="button" class="btn btn-primary" data-toggle="modal" 
       data-target="#exampleModal">Launch demo modal</button> 

      <!-- Modal --> 
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 
       aria-labelledby="exampleModalLabel" aria-hidden="true" th:fragment="modalContents"> 
       <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
          <button type="button" class="close" data-dismiss="modal" 
           aria-label="Close"> 
           <span aria-hidden="true">&times;</span> 
          </button> 
         </div> 
         <div class="modal-body"> 
          <p th:if="${area != null}" th:text="${area}" /> 
          <p th:unless="${area == null}" >area == null</p> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-secondary" 
           data-dismiss="modal">Close</button> 
          <button type="button" class="btn btn-primary">Save 
           changes</button> 
         </div> 
        </div> 
       </div> 
      </div> 

셋째 : 나는 내가 부트 스트랩에서 간단한 자바 스크립트 플러스 아약스 기능을 추가하려면이 파일의 끝 : 내가 제대로 데이터베이스에서 데이터를 가져

<script> 
     $('#exampleModal').on('show.bs.modal', function(event) { 
      var button = $(event.relatedTarget) // Button that triggered the modal 
      var recipient = button.data('whatever') // Extract info from data-* attributes 
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 
      var modal = $(this) 
      modal.find('.modal-title').text('New message to ' + recipient) 
      modal.find('.modal-body input').val(recipient) 

      $.ajax({ 
       type : 'POST', 
       url : "/showarea", 
       success : function(data) { 

       } 
      }); 
     }) 
    </script> 

을,하지만 난 할 수 없을거야 모달 HTML 페이지에 데이터를 표시하십시오.

UPDATE 1 :

하지 내 모달의 데이터를 보여줄 수. 예를 들어 , 나는 자바 스크립트

<div class="modal-body" id="areaValue"> 
    <p id="area" th:if="${area != null}" th:text="${area}" /> 
</div> 

추가 : 불을 지르고와

$.ajax({ 
    type : 'POST', 
    url : "/showarea", 
    success : function(data) { 
      $('#areaValue').html(data); 

    } 
}); 

디버깅 내가 모달의 값을 얻을 수 있지만, showded하지!

I 값의 목록을 보여 좋아하지만 간단한 텍스트를 표시 할 수 없습니다 것입니다 ...

어떤 제안이? 난 당신이

채우기 HTML

보기 모달

DB에서

• 테이크 값에 순서에 AJAX 호출을하고 있다는 것을 이해하는 코드를 읽어

  감사

Answer 1

을

작성한 코드는 구문 상 올바르지 만 한 가지 잘못된 점은 ... m odal 아약스 호출의 성공 메소드HTML이 경우 코드를 다음과 같이 수정합니다. 스프링 부트의 전문가가 아니기 때문에 mvc 방식으로 작성하고 있지만 스프링 부트 코드에 적용 할 수 있습니다.) :

@RequestMapping(value = "/showarea", method = RequestMethod.POST) 
    public @ResponseBody String areaModel() { 
     LOG.info("/showarea"); 

     List<Zona> zonas = zonaService.findAll(); 


     return zonas.get(0).getNom_ZONA(); 
    } 


    <button type="button" class="btn btn-primary" data-toggle="modal" 
        data-target="#exampleModal">Launch demo modal</button> 

       <!-- Modal --> 
       <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLabel" aria-hidden="true" th:fragment="modalContents"> 
        <div class="modal-dialog" role="document"> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
           <button type="button" class="close" data-dismiss="modal" 
            aria-label="Close"> 
            <span aria-hidden="true">&times;</span> 
           </button> 
          </div> 
          <div class="modal-body" id="areaValue"> 

          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-secondary" 
            data-dismiss="modal">Close</button> 
           <button type="button" class="btn btn-primary">Save 
            changes</button> 
          </div> 
         </div> 
        </div> 
       </div> 

    <script> 
      $('#exampleModal').on('show.bs.modal', function(event) { 
       var button = $(event.relatedTarget) 
       var recipient = button.data('whatever') 
       var modal = $(this) 
       modal.find('.modal-title').text('New message to ' + recipient) 
       modal.find('.modal-body input').val(recipient) 
       //I would prevent the default behaviour of the button 
       event.preventDefault(); 
       //AJAX Call 
       $.ajax({ 
        type : 'POST', 
        url : "/showarea", 
        success : function(data) { 
         //Get Area name after AJAX call 
         var nomArea = data; 
         //Valorize HTML 
         $("#areaValue").html(nomeArea); 
         //Finally open popup 
        } 
       }); 
      }) 
     </script> 

나는 그것이 모달의 값을 표시 할 수없는 유용한

안젤로