Попытка добавить страницу подтверждения модели (продолжить / отменить) с некоторой информацией в ней.
Информация поступает из формы с парой входных данных ...
Я создал небольшой проект, думаю, он иллюстрирует это требование.
Перед отправкой я хочу показать на модальной странице значение в зависимости от значений, введенных в форму. В этом случае у меня есть 3 входа, чтобы сделать простую сумму.
Таким образом, на модальной странице отображается сумма, и пользователь может решить продолжить или нет.
Это ссылка на проект. Я застрял в index.html разделе jquery.
[https://github.com/davisoski/action-listener][1]
Я думаю, что это правильный подход, но я не могу сделать это в моем случае
[https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/][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">×</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: фрагмент:
<!-- 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">×</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/