仅当用户在其他值为“等待”的单选按钮中选择一个单选按钮时,我才需要显示确认/对话框并从对话框内发送 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() {});


评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!