BlockUI가 양식 유효성 검사 전에 작동하지 않습니다.

Question

struts2-jquery 플러그인에서 sj : submit 태그를 사용하여 제출할 양식이 있습니다. 제출 단추는 validateFunction 및 onAfterValidationTopic으로 설정됩니다. 사용자가 sj : submit을 통해이 양식을 저장할 때 jquery BlockUI를 사용하여 양식을 차단하려고합니다. 문제는 유효성 검사가 완료 될 때까지 BlockUI가 켜지지 않는다는 것입니다. 이 양식은 매우 광범위하고 유효성 검사에 1 초가 걸리므로이 시간 간격은 사용자에게 매우 현저합니다.

버튼의 onClick 매개 변수에 추가 된 javascript 메서드를 통해 BlockUI가 호출됩니다. 나는 fadeIn을 0으로 설정하여 동 기적으로 실행해야한다.

breakpointing을 통해 BlockUI가 struts2-jquery 유효성 검사 메서드보다 먼저 호출되지만 양식 유효성 검사가 완료되고 유효성 검사 경고가 표시 될 때까지 블록이 나타나지 않는 것으로 확인되었습니다.

내 작업 순서는 onClick 매개 변수를 통해 UI를 차단하고 struts2-jquery 플러그인에서 유효성 검사를 위해 양식을 제출 한 다음 유효성 검사가 실패한 경우 UI의 차단을 해제하는 내 AfterValidationTopic을 시작하는 것입니다. UI가 차단되는 것을 제외하고는 모든 단계가 올바른 순서로 진행됩니다. 나는 이것이 왜 그런지에 관해서는 손해보고있다. jquery.struts2.js 파일의 $ .blockUI 호출을 $ .elem.click 함수에 같은 결과로 추가하려고 시도했습니다. BlockUI가 호출되고 있지만 보이지 않습니다.

<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

나는 문제가 무엇인지 파악하는 관리

여기 내 JSP입니다. jquery.struts2.js 파일의 validateForm 메소드에서 폼은 ajax를 통해 유효성 검사를 위해 동 기적으로 제출됩니다. ajaxSubmit의 async 매개 변수는 false로 설정됩니다. 이렇게하면 유효성 검사가 끝날 때까지 브라우저가 완전히 잠기므로 BlockUI 오버레이가 표시되지 않습니다. 이 문제를 해결하기 위해 formsubmit 메소드에서 $ elem.click() 코드를 업데이트했습니다. 이제 AjaxSubmit이 비동기 적으로 실행되고 (async가 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; 
});