Passing values from controller to Modal page

Trying to pass my data from controller to modal page.

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

First: In controller a simple method to query database

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

I put area in my model.

Second: I used an example from:
https://v4-alpha.getbootstrap.com/components/modal/#modal-components

to add a text.

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

Third: I the end of this file I add a simple javascript from bootstrap plus an ajax function:

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

I get the data from database correctly, but I'm not be able to show the data in my modal html page.

UPDATE 1:

Not able to show the data in my modal. For instance, I added

<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 with firebug I get values in modal, but not showded!!!

I would like to show a list of values, but unable to show a simple text...

Any suggestions?

Thanks

Passing values from controller to Modal page

1 Answers