仅当用户在其他值为“等待”的单选按钮中选择一个单选按钮时,我才需要显示确认/对话框并从对话框内发送 POST 请求。在所有其他情况下,不需要显示确认/对话框,并且需要直接从 #save
元素触发 POST 请求。
这是我的 JSP 中的表单元素:
<form:form id="saveform" modelAttribute="form" action="#">
<div class="row form-group radio">
<label class="col-xs-12 control-label text-right">
<spring:message code="indicatorX"/> :
</label>
<div class="col-xs-12">
<div class="has-error">
<form:errors path="indicatorX" cssClass="help-block error" />
</div>
<label class="radio-inline radio-inline-espace">
<form:radiobutton path="indicatorX" value="true" class="js-close" data-collapse="divX"/>
<spring:message code="yes"/>
</label>
<label class="radio-inline radio-inline-espace">
<form:radiobutton path="indicatorX" value="false" class="js-open" data-collapse="divX"/>
<spring:message code="no"/>
</label>
<label class="radio-inline radio-inline-espace">
<form:radiobutton path="indicatorX" value="waiting" class="js-close" data-collapse="divX"/>
<spring:message code="Not responded"/>
</label>
</div>
</div>
<div class="row form-group radio">
<label class="col-xs-12 control-label text-right">
<spring:message code="indicatorY"/> :
</label>
<div class="col-xs-12">
<div class="has-error">
<form:errors path="indicatorX" cssClass="help-block error" />
</div>
<label class="radio-inline radio-inline-espace">
<form:radiobutton path="indicatorY" value="true" class="js-close" data-collapse="divY"/>
<spring:message code="yes"/>
</label>
<label class="radio-inline radio-inline-espace">
<form:radiobutton path="indicatorY" value="false" class="js-open" data-collapse="divY"/>
<spring:message code="no"/>
</label>
<label class="radio-inline radio-inline-espace">
<form:radiobutton path="indicatorY" value="waiting" class="js-close" data-collapse="divY"/>
<spring:message code="Not responded"/>
</label>
</div>
</div>
<a id="save" class="btn btn-primary" href="#modalConfirmation" data-toggle="modal" data-backdrop="static">
<spring:message code="saveRecord" />
</a>
<!-- Modal element to confirm if user want to save -->
<div id="modalConfirmation" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" data-show="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<spring:message code="MSG-XXX"/>
</div>
<div class="modal-footer">
<button id="confirmYes" class="btn btn-default" data-dismiss="modal">
<spring:message code="no"/>
</button>
<button id="confirmYes" class="btn btn-primary" data-dismiss="modal">
<spring:message code="yes"/>
</button>
</div>
</div>
</div>
</div>
我的 Controller 中的 POST 端点
@RequestMapping(value = "/save", method = RequestMethod.POST)
public String save(@ModelAttribute FormObject form,
BindingResult validation, RedirectAttributes redirectAttributes, ModelMap model) {
LOG.info("webapp: method = save");
//validation logic
//service logic
return ...;
}
请记住,我正在接管一个项目,因此还没有设计架构,目前我必须处理一些特殊情况,因为您可以看到该按钮被定义为 anchor 元素(带有 id 保存)。
尝试几个示例时迄今为止取得的结果:
A) 保存按钮将触发 POST 请求并显示对话框(虽然不应该),而无需等待用户确认
或者
B)如果任何单选按钮的选定值“正在等待”,则请求将被触发,但不会到达服务器。
我很难思考如何实现这一目标,我在堆栈上看到了很多这样的例子 example dialogbox ajax关于如何从对话框内发送,但我认为在我的情况下,在作为异步调用发送之前我需要一些验证逻辑? (AJAX)
这是我的 JS 代码,其中包含一些简单的逻辑,用于检查单选按钮是否具有“等待”值。
var selectedValOne = $("[name='indicatorX']:checked").val();
var selectedValTwo = $("[name='indicatorY']:checked").val();
$('document').on(
"click",
"#save",
function() {
if (selectedValOne === 'waiting' || selectedValTwo === 'waiting') {
$("#modalConfirmation").modal("show");
$('#confirmYes').on('click', function() {
showProgressbar();
$("#saveform").attr(
'action',
PATH_CONTEXT +
'/savingcontext/save');
$("#saveform").submit();
});
} else {
showProgressbar();
$("#saveform").attr(
'action',
PATH_CONTEXT +
'/savingcontext/save');
$("#saveform").submit();
}
});
请您参考如下方法:
该按钮现在正在触发并调用模式,并从"is"按钮触发提交请求,我必须将 jquery 调用更改为 $('document').on( "click", "#save", function() {});