Передача значений с контроллера на страницу Modal

Попытка передать мои данные с контроллера на страницу мода.

Следуя этой ссылке: 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>

В-третьих: я в конце этого файла добавляю простой javascript из bootstrap плюс функцию 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 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>

Я правильно получаю данные из базы данных, но я не могу показать данные на моей модной странице html.

ОБНОВЛЕНИЕ 1:

Невозможно показать данные в моем модальном формате. Например, я добавил

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

в javascript:

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

    }
});

отладка с firebug Я получаю значения в модальных, но не показанных!!!

Я хотел бы показать список значений, но не смог показать простой текст...

Любые предложения?

Спасибо

Ответ 1

Читая свой код, я понимаю, что вы делаете вызов AJAX, чтобы

принимать значения из DB
заполнить HTML
просмотр модальных

Код, который вы написали, синтаксически корректен, но вы ошибаетесь в одном... вы должны заполнить модальный HTML в методе успеха вызова ajax В этом случае я бы изменил код следующим образом (я пишу его в формате spring mvc, потому что я не эксперт по загрузке spring, но вы можете адаптировать его к коду 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>

Я надеюсь, что это полезно

Анжело