表单验证之前BlockUI无法工作

Question

我有一个表单使用struts2-jquery插件的sj：submit标记提交。提交按钮设置了一个validateFunction和一个onAfterValidationTopic。当用户通过sj：submit保存这个表单时，我试图使用jQuery BlockUI阻止表单。问题是直到验证完成后，BlockUI才会打开。由于这种形式非常广泛，验证需要一秒钟，因此这种时间差异对用户来说非常明显。

BlockUI正在通过添加到按钮的onClick参数的javascript方法调用。我已经将fadeIn设置为0，所以它应该同步执行。

通过断点化，我已经确定BlockUI在任何struts2-jquery验证方法之前被调用，但是在表单验证并且它被提交或验证警告被标记之前，块仍然不出现。

我的操作顺序应该是通过onClick参数来阻止用户界面，让struts2-jquery插件提交表单进行验证，然后触发我的AfterValidationTopic，如果验证失败，将解除对UI的阻止。所有这些步骤都按照正确的顺序进行，除了我没有看到UI被阻止之外。我不知道为什么会出现这种情况。我甚至试图在jquery.struts2.js文件中添加一个$ .blockUI调用到$ .elem.click函数中，结果相同。 BlockUI正在被调用，但我没有看到它。

这里是我的JSP：

<sj:submit 
    button="true" 
    type="button" 
    id="save_button" 
    cssClass="btn bg-cobalt-300" 
    buttonIcon="icon-floppy-disk" 
    label="Save" 
    validate="true" 
    formIds="my_form" 
    onAfterValidationTopics="postValidation" 
    validateFunction="bootstrapValidation" 
    value="%{getText('global.save')}" 
    onClick="loadingMaskSave();" 
    /> 

和JS代码：

function loadingMaskSave() { 
    $.blockUI({ 
     fadeIn: 0 
    }); 
} 

$.subscribe('postValidation', function (event,data) { 
    if(event.originalEvent.formvalidate == false) { 
     $.unblockUI(); 
    } 
}); 

Answer 1

我总算弄明白了什么问题。在jquery.struts2.js文件的validateForm方法中，表单正在通过ajax同步提交验证。 ajaxSubmit的异步参数设置为false。这会导致浏览器完全锁定，直到验证完成后，这就是BlockUI覆盖图未显示的原因。为了解决这个问题，我更新了formsubmit方法中的$ elem.click（）代码。 AjaxSubmit现在异步触发（异步设置为true），并且验证主题和表单的实际提交处理现在由AjaxSubmit的完整方法处理。这可以防止浏览器被锁定，我现在可以在验证开始之前看到BlockUI覆盖图。

$elem.click(function(e) { 
    var form = $(self.escId(o.formids)), 
     orginal = {}; 
    orginal.formvalidate = true; 
    e.preventDefault(); 

    if (o.validate) { 
     var submit = true, 
      ajaxSubmitParams = {}; 

     if (!self.loadAtOnce) { 
      self.require("js/plugins/jquery.form" + self.minSuffix + ".js"); 
     } 

     ajaxSubmitParams.type = "POST"; 
     ajaxSubmitParams.data = { 
       "struts.enableJSONValidation": true, 
       "struts.validateOnly": true 
     }; 
     if (o.href && o.href !== '#') { 
      ajaxSubmitParams.url = o.href; 
     } 
     else { 
      ajaxSubmitParams.url = form[0].action; 
     } 

     if (o.hrefparameter) { 
      ajaxSubmitParams.url = ajaxSubmitParams.url + '?' + o.hrefparameter; 
     } 

     ajaxSubmitParams.cache = false; 
     //ajaxSubmitParams.forceSync = true; 
     ajaxSubmitParams.async = true; 

     ajaxSubmitParams.complete = function(request, status) { 
      var f = $(form[0]), 
       et = request.responseText, 
       errors; 
      if ($.isFunction(o.validateFunction)) { 
       if (et && et.length > 10) { 
        submit = false; 
        if(et.substring(0,2) === "/*") { 
         // Handle Validation Errors for all Struts2 versions until 2.2.3.1 
         errors = $.parseJSON(et.substring(2, et.length - 2)); 
        } 
        else { 
         errors = $.parseJSON(et); 
        } 
        o.validateFunction(f, errors); 
       } 
      } 
      else if (StrutsUtils !== undefined) { 
       StrutsUtils.clearValidationErrors(form[0]); 

       // get errors from response 
       if(et.substring(0,2) === "/*") { 
        errors = StrutsUtils.getValidationErrors(et); 
       } 
       else { 
        errors = StrutsUtils.getValidationErrors($.parseJSON(et)); 
       } 

       // show errors, if any 
       if (errors.fieldErrors || errors.errors) { 
        StrutsUtils.showValidationErrors(form[0], errors); 
        submit = false; 
       } 
      } 
      self.log('form validation : ' + submit); 
      orginal.formvalidate = submit; 

      if (o.onaftervalidation) { 
       $.each(o.onaftervalidation.split(','), function(i, topic) { 
        $elem.publish(topic, $elem, orginal); 
       }); 
      } 

      if(orginal.formvalidate) { 
       if (o.href && o.href != "#") { 
        form[0].action = o.href; 
       } 
       form.submit(); 
      } 
     }; 

     form.ajaxSubmit(ajaxSubmitParams); 
    } 

    return false; 
});