Показать значения из контроллера на модальной странице перед отправкой

Попытка добавить страницу подтверждения модели (продолжить / отменить) с некоторой информацией на ней.

Информация поступает из формы с парой входов ...

Я создал небольшой проект, думаю, он иллюстрирует это требование.

Перед отправкой я хочу показать на модальной странице значение, зависящее от значений, введенных в форму. В этом случае у меня есть 3 входа, чтобы сделать простую сумму.

Таким образом, на модальной странице отображается сумма, и пользователь может решить, продолжить или нет.

Это ссылка на проект. Я застрял в разделе jquery index.html.

[https://github.com/davisoski/action-listener visible[1]

Я думаю, что это правильный подход, но в моем случае я не могу этого сделать

[https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/ visible[2]

Любая идея

ОБНОВЛЕНИЕ 1

У меня простая форма с 3 полями. У меня есть контроллер с постмаппингом для / saveform. Этот метод просто вызывает службу и делает сумму. Нет проблем с этим.

<form action = "#" th:action = "@{/saveform}" th:object = "${modelform}"
                    method = "post">

    <div class = "form-group row">
        <div class = "col-12 col-md-6  col-lg-3">
            <label class = "col-form-label col-form-label-sm" for = "value1">Value1</label>
            <input class = "form-control form-control-sm" th:field = "*{value1}"
                id = "value1" type = "text" />
        </div>
    </div>
    <div class = "form-group row">
        <div class = "col-12 col-md-6  col-lg-3">
            <label class = "col-form-label col-form-label-sm" for = "value2">Value2</label>
            <input class = "form-control form-control-sm" th:field = "*{value2}"
                id = "value2" type = "text" />
        </div>
    </div>
    <div class = "form-group row">
        <div class = "col-12 col-md-6  col-lg-3">
            <label class = "col-form-label col-form-label-sm" for = "value3">Value3</label>
            <input class = "form-control form-control-sm" th:field = "*{value3}"
                id = "value3" type = "text" />
        </div>
    </div>

    <div class = "form-group row">
        <div class = "col-12 col-md-6  col-lg-3">

            <a data-toggle = "modal" href = "#myModal" class = "btn btn-primary"><i
                class = "icon-plus-squared"></i><span>Calculate Sum</span></a> <a
                data-toggle = "modal" href = "#myModal" class = "btn btn-primary"
                th:onclick = "'javascript:openModal();'"><i
                class = "icon-plus-squared"></i><span>Calculate Sum2</span></a>



        </div>
    </div>

</form>

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

Я добавил такую ​​модель (см. Index.html в проекте github), я не вижу способа сделать предыдущий вызов метода или чего-то еще, чтобы показать значение суммы на странице модели. Раньше я делал в JSF с помощью actionListeners, но здесь я не знаю, как это сделать. Блог с qtzar.com дал мне идею

<div class = "modal" id = "myModal">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h5 class = "modal-title">We have calculated the sum of
                    values</h5>
                <button type = "button" class = "close" id = "close"
                    data-dismiss = "modal" aria-label = "Close">
                    <span aria-hidden = "true">&times;</span>
                </button>
            </div>
            <div class = "modal-body">
                <p>Are you agree with this sum???</p>
            </div>
            <div class = "modal-footer">
                <!-- 
                <a href = "#" data-dismiss = "modal" class = "btn">Close</a> <a
                    href = "#" class = "btn btn-primary">Save changes</a>
-->
                <button type = "button" class = "btn btn-primary btn-ok"
                    id = "continue">Continue</button>
                <button type = "button" class = "btn btn-danger"
                    data-dismiss = "modal" id = "cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

ОБНОВЛЕНИЕ 2

Должно получиться примерно так:

$(function() {
        $.ajax({
            url : "/sum",
            success : function(data) {
                $("#modalHolder").html(data);
                $("#myModal").modal("show");
            }

        });

    }

и определите в контроллере @RequestMapping

@RequestMapping("/sum")

но я не вижу, как передавать параметры и куда помещать возвращаемые значения в модальный

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

Изменена модальная страница, добавлен th: fragment:

        <!--  Modal -->
        <div class = "modal" id = "personModal" role = "dialog"
            th:fragment = "modalContents">
            <div class = "modal-dialog">
                <div class = "modal-content">
                    <div class = "modal-header">
                        <h5 class = "modal-title">We have calculated the sum of values</h5>
                        <button type = "button" class = "close" id = "close"
                            data-dismiss = "modal" aria-label = "Close">
                            <span aria-hidden = "true">&times;</span>
                        </button>
                    </div>
                    <div class = "modal-body">
                        <p>Are you agree with this sum???</p>
                        <h4 class = "btn" th:text = "${sum}"></h4>
                    </div>
                    <div class = "modal-footer">

                        <button type = "button" class = "btn btn-primary btn-ok" id = "continue">Continue</button>
                        <button type = "button" class = "btn btn-danger" data-dismiss = "modal"
                            id = "cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>

В контроллер добавлены два метода: один для вычисления суммы, отображаемой в модальном диалоговом окне, а другой для отправки на сервер.

@PostMapping({ "/saveform" })
    public String saveForm(Model model, RedirectAttributes ra) {
        LOG.info("HomeController.saveForm");

        //Simulate the sum
        model.addAttribute("sum", "25");

        return "/::modalContents";

    }

    @RequestMapping("/sum")
    public String mySum(Model model) {

        model.addAttribute("sum", "24");

        return "/::modalContents";

    }

I'm think I'm close, but I'm getting error 500.


  [1]: https://github.com/davisoski/action-listener
  [2]: https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/