表單驗證之前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; 
});