नियंत्रक से मॉड्यूल पृष्ठ

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> 

तीसरा: मैं इस फाइल के अंत मैं बूटस्ट्रैप से एक सरल जावास्क्रिप्ट के साथ साथ एक ajax समारोह जोड़ें:

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

मैं सही ढंग से डेटाबेस से डेटा मिलता है, लेकिन मैं करने में सक्षम नहीं कर रहा हूँ मेरे मोडल एचटीएमएल पेज में डेटा दिखाएं।

अद्यतन 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 नहीं !!!

मैं मानों की सूची प्रदर्शित करना चाहते हैं, लेकिन एक साधारण पाठ दिखाने में असमर्थ ...

कोई सुझाव?

धन्यवाद

Answer 1

अपने कोड को पढ़ने मैं समझता हूँ कि आप डीबी से

रूप से भरें एचटीएमएल

दृश्य मोडल

• ले मूल्यों के क्रम में एक AJAX कॉल कर रही हैं

  आपके द्वारा लिखे गए कोड वाक्य रचनात्मक रूप से सही हैं लेकिन आप एक चीज़ में गलत हैं ... आपको एम को पॉप्युलेट करना होगा AJAX कॉल की सफलता विधि में odal HTML इस मामले में मैं कोड को निम्न तरीके से संशोधित करूंगा (मैं इसे वसंत एमवीसी तरीके से लिख रहा हूं क्योंकि मैं वसंत बूट का विशेषज्ञ नहीं हूं लेकिन आप इसे springboot कोड में अनुकूलित कर सकते हैं):

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

  मुझे आशा है कि यह उपयोगी

  एंजेलो