Passing values from controller to Modal page

Question

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

Answer 1

By reading your code I understand that you are doing an AJAX call in order to

• take values from DB
• populate HTML
• view modal

The code you wrote is syntactically correct but you are wrong in one thing... you must populate the modal HTML in the success method of the ajax call In this case I would modify the code in the following way (I'm writing it in spring mvc way because i'm not expert of spring boot but you can adapt it to springboot code):

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

I hope it's usefull

Angelo