用户提交表单后,我想添加成功通知。
我已经签出了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>
有关点击操作的通知已显示,就我而言,我需要在提交表单后显示。 您能否建议和分享您的专业知识?也许还有其他选择。
答案 0 :(得分:1)
这里是另一种选择。
您可以遵循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";
}
只需在message
处理程序渲染的视图中显示此/someGetUrl
。
答案 1 :(得分:1)
按照@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
});
}
});
请随意发表评论。我想知道可以生产吗?只是为了确保我没有重新发明轮子。