Question

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

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

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

我的操作顺序应该是通过onClick参数阻止UI，让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的async参数设置为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;
});

在表单验证之前，BlockUI不起作用

1 个答案: