Blockui在表单验证之前无法工作

Question

我有一个使用sj：从struts2-jquery插件提交标签的表单。提交按钮是设置带有validateFunction和AnafterValidationTopic的设置。当用户通过SJ：提交保存此表单时，我正在尝试使用jQuery Blockui阻止表单。问题在于，直到验证完成后，BlockUI才打开。由于此表格非常广泛，并且验证需要一秒钟，因此用户的时间差距极为明显。

通过添加到按钮的OnClick参数中的JavaScript方法调用BlockUI。我已经将Fadein设置为0，因此应该同步执行。

通过断点，我确定在任何struts2-jquery验证方法之前都调用了块，但是直到表格验证并已提交或标记验证警告后，该块仍不出现。

我的操作顺序应该是通过ONCLICK参数阻止UI，让Struts2-Jquery插件提交表格进行验证，然后触发我的后效率，如果验证不成功，它将解除UI的封锁。所有这些步骤都以正确的顺序进行，只是我看不到UI被阻止。我为何会这种情况感到茫然。我甚至尝试在jquery.struts2.js文件中添加$ .blockui调用，并以相同的结果单击函数。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方法中，该表格正在同步提交以供验证。AjaxSubmit的异步参数设置为false。这会导致浏览器完全锁定，直到验证完成后，这就是为什么BlockUI覆盖不显示的原因。为了解决这个问题，我在formubmit方法中更新了$ 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;
});