Übergeben von Werten vom Controller an die Modal-Seite

Question

Der Versuch, meine Daten vom Controller an die modale Seite zu übergeben.

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

Erstens: In Controller eine einfache Methode Datenbank

@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"; 
    } 

Ich habe Bereich in meinem Modell abzufragen.

Zweitens: Ich habe ein Beispiel aus: https://v4-alpha.getbootstrap.com/components/modal/#modal-components

einen Text hinzufügen.

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

Drittens: ich das Ende dieser Datei ich ein einfaches Javascript aus Bootstrap hinzufügen sowie eine Ajax-Funktion:

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

ich die Daten aus der Datenbank richtig, aber ich bin nicht in der Lage sein, Zeige die Daten in meiner modalen HTML-Seite.

UPDATE 1:

Nicht in der Lage, die Daten in meinem modal zu zeigen. Zum Beispiel habe ich

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

in javascript:

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

    } 
}); 

Debugging mit Firebug I-Werte in modal, aber nicht showded !!!

Ich möchte eine Liste von Werten zeigen, aber nicht in der Lage einen einfachen Text zu zeigen ...

Irgendwelche Vorschläge?

Dank

Answer 1

von Code zu lesen Ich verstehe, dass Sie einen AJAX-Aufruf, um

• nehmen Werte von DB
• bevöl HTML
• Ansicht modal

tun

Der Code, den du geschrieben hast, ist syntaktisch korrekt, aber du liegst falsch in einer Sache ... du musst die m füllen Odal HTML in der Erfolgsmethode des Ajax Anrufs In diesem Fall würde ich den Code in der folgenden Weise ändern (Ich schreibe es im Frühjahr mvc Weise, weil ich nicht Experte des Spring-Boot bin, aber Sie können es SpringBlock-Code anpassen):

@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> 

ich hoffe, es nützlich

Angelo