ajaxSubmit 양식 팝업 "처리"div가있는 유효성 확인

웹 양식에서 ajaxSubmit을 사용하고 있습니다. 또한 사용자가 제출을 클릭하면 흐리게 처리 된 배경으로 "요청 처리 중"인 div를 팝업해야합니다.ajaxSubmit 양식 팝업 "처리"div가있는 유효성 확인

내가 지금 사용하고 코드는 다음과 같다 :

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#CustomerService").validationEngine({ 
     ajaxSubmit: true, 
     ajaxSubmitFile: "processor.aspx", 
     success : function() {window.location.replace("Thankyou.aspx")}, 
     failure : function() {} 
    }) 
}); 
</script> 

<script type="text/javascript"> 
function DimScreen() 
{ 
    document.getElementById("DimBlackScreen").style.visibility = "visible"; 
} 
</script>

그리고 제출 버튼에 대한 내 HTML 부분 :

<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" onclick="DimScreen();" />

그런데 여기에 문제가 : 양식이 전달 여부 유효성 검사 여부와 상관없이 팝업 div가 항상 표시됩니다. 원하는 경우가 아닙니다.

양식 유효성 검사가 통과되면 div를 표시 할 수있는 방법이 있습니까?

많은 도움에 감사드립니다. 이

$().ajaxStart(function() { 
    $("#DimBlackScreen").show(); 
}).ajaxStop(function() { 
    $("#DimBlackScreen").hide(); 
});

이 문서에 모든 재료를 넣어 기억하려고 JQuery와 1.4 이하 버전을 사용하는 경우

$(document).ajaxStart(function() { 
    $("#DimBlackScreen").show(); 
}).ajaxStop(function() { 
    $("#DimBlackScreen").hide(); 
});

또는 :

출처

2012-06-21 yokeholy

유효성 검사가 완료된 후 왜 "Processing"div *를 표시 하시겠습니까? –

사용자가 방문 페이지 (Thankyou.aspx)로 리디렉션되기를 기다리는 동안 처리 스크립트 (processor.aspx)가 실행되는 데 시간이 걸리기 때문입니다. – yokeholy

위 JQuery와 버전 1.4을 사용하는 경우이를 시도합니다. 준비

출처

2012-06-21 17:28:05

이 코드는 어디에 삽입해야합니까? 아니면 기존 코드를이 코드로 대체합니까? – yokeholy

이 코드를 스크립트 태그 사이에 넣기 만하면됩니다. –

$(document).ready(function() { 
    $("input#Send").click(function(e){ 
     e.preventDefault(); //prevent default submit action,, use ajax instead 
     $('#DimBlackScreen').show(); 
     $("#CustomerService").validationEngine({ 
     ajaxSubmit: true, 
     ajaxSubmitFile: "processor.aspx", 
     success : function() { 
      $('#DimBlackScreen').hide(); 
      window.location.replace("Thankyou.aspx"); //or $('body').html('Thank you!'); 

     }, 
     failure : function() {} 
     });// end validationEngine 
}); //end click 

});//end document.ready 

<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" />

출처

2012-06-21 17:33:43 alsahin

답변 해 주셔서 감사합니다. 이 코드를 시도하고 기본 동작을 방지하는 것은 작동하지 않는 것으로 보입니다. 그렇지 않으면 유효성 검사가 작동하지 않습니다. – yokeholy

@yokeholy 수정 : 입력 # 버튼 대신 보내기 # 보내기 – alsahin

좋아, alsahin 및 Kundan에서 다른 두 답변에 의해 영감을, 내가 그것을 알아 냈 m yself :

변경할 수있는 유일한 방법은 ajax가 유효성 검증 실패를 처리하는 방법입니다. 그래서 형태가 통과하지 않는 경우 팝업은 "처리"DIV 실제로 숨겨져을 할 때마다 사용자 제출 버튼을 클릭 만 재설정을 보여주고 있음을

그래서

failure : function() {document.getElementById("DimBlackScreen").style.visibility = "hidden";}

에

failure : function() {}

변경 확인.

내 현재 코드에 만족하지만 더 좋은 아이디어가 있으면 알려 주시기 바랍니다.

출처

2012-06-23 05:51:38 yokeholy

ajaxSubmit 양식 팝업 "처리"div가있는 유효성 확인

답변

관련 문제