title: Passing values from controller to Modal page
body: <p>Trying to pass my data from controller to modal page.</p>
  
  <p>Following this link:
  <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></p>
  
  <p>First: In controller a simple method to query database</p>
  
  <pre><code>@PostMapping("/showarea")
  public String areaModel(Model model) {
      LOG.info("/showarea");
  
      List&lt;Zona&gt; zonas = zonaService.findAll();
  
      model.addAttribute("area", zonas.get(0).getNom_ZONA());
      LOG.info("area: " + zonas.get(0).getNom_ZONA());
  
      return "modal::modalContents";
  }
  </code></pre>
  
  <p>I put <strong>area</strong> in my model.</p>
  
  <p>Second: I used an example from:<br>
  <a href="https://v4-alpha.getbootstrap.com/components/modal/#modal-components" rel="nofollow noreferrer">https://v4-alpha.getbootstrap.com/components/modal/#modal-components</a></p>
  
  <p>to add a text.</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" data-toggle="modal"
          data-target="#exampleModal"&gt;Launch demo modal
  &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
       aria-labelledby="exampleModalLabel" aria-hidden="true" th:fragment="modalContents"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal title&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p th:if="${area != null}" th:text="${area}"/&gt;
                  &lt;p th:unless="${area == null}"&gt;area == null&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;
                      Close
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;
                      Save changes
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Third: I the end of this file I add a simple javascript from bootstrap plus an ajax function:</p>
  
  <pre><code>&lt;script&gt;
      $('#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) {
              }
          });
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>I get the data from database correctly, but I'm not be able to show the data in my modal html page.</p>
  
  <p><strong>UPDATE 1:</strong></p>
  
  <p>Not able to show the data in my modal. 
  For instance, I added</p>
  
  <pre><code>&lt;div class="modal-body" id="areaValue"&gt;
      &lt;p id="area" th:if="${area != null}" th:text="${area}"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in javascript:</p>
  
  <pre><code>$.ajax({
      type : 'POST',
      url : "/showarea",
      success : function(data) {
             $('#areaValue').html(data);
      }
  });
  </code></pre>
  
  <p>debugging with firebug I get values in modal, but not showded!!!</p>
  
  <p>I would like to show a list of values, but unable to show a simple text...</p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks</p>