[英]How to add success notification after form submit
我想在用户提交表单后添加成功通知。
我已经检查了Pnotify js库 - https://sciactive.com/pnotify/ ,看起来不错。 但不知道我如何在我的CRUD项目中使用。 我正在使用Spring Boot和Thymeleaf作为前端。
我检查了文档:
<button class="btn btn-default source" onclick="new PNotify({
title: 'Regular Success',
text: 'That thing that you were trying to do worked!',
type: 'success',
styling: 'bootstrap3'
});">Success</button>
这是我的表格:
<form action="#" th:action="@{/contractors-save}"
th:object="${contractor}"
method="post" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Name</label>
<div class="col-md-5 col-sm-5 col-xs-12">
<input type="text" th:field="*{name}" class="form-control"
placeholder="name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Description</label>
<div class="col-md-5 col-sm-5 col-xs-12">
<input type="text" th:field="*{description}"
class="form-control"
placeholder="description"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<input type="submit" value="Save" class="btn btn-success">
</div>
通知显示单击操作,在我的情况下,我需要在表单提交后显示。 您能建议并分享您的专业知识吗? 也许其他选择。
这是另一种选择。
您可以按照PRG
模式并使用RedirectAttributes
添加Flash属性。
例如:
@RequestMapping(value = "/contractor", method = RequestMethod.POST)
public String handle(@Valid @ModelAttribute Contractor contractor,
BindingResult result,
RedirectAttributes redirectAttributes) {
// Save contactor ...
redirectAttributes.addFlashAttribute("message", "Successful!");
return "redirect:/someGetUrl";
}
只需在/someGetUrl
处理程序呈现的视图中显示此message
。
正如@Minar Mahmud建议的那样,我遵循PRG模式,将与我的实现分享:
控制器:
@RequestMapping(value = "/contractor-save", method = RequestMethod.POST)
public String saveContractor(@ModelAttribute(value = "contractor") Contractor contractor,
RedirectAttributes redirectAttributes) {
Contractor savedContractor = contractorService.save(contractor);
redirectAttributes.addFlashAttribute("notification",
String.format("Contractor \"%s\" successfully saved", savedContractor.getName()));
redirectAttributes.addFlashAttribute("action", "save");
return "redirect:/contractors";
}
在HTML文件中,使用javascript显示页面加载时的通知:
<script th:inline="javascript">
$(document).ready(function () {
var notification = /*[[${notification}]]*/ "";
var action = /*[[${action}]]*/ "";
if (action === 'save') {
new PNotify({
title: 'Save contractor',
text: notification,
type: 'success',
styling: 'bootstrap3',
delay: 3000
});
} else if (action === 'remove') {
new PNotify({
title: 'Remove contractor',
text: notification,
type: 'success',
styling: 'bootstrap3',
delay: 3000
});
} else if (action === 'update') {
new PNotify({
title: 'Edit contractor',
text: notification,
type: 'success',
styling: 'bootstrap3',
delay: 3000
});
}
});
请填写免费评论。 我想知道生产是否合适? 只是为了确保我没有重新发明轮子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.