我正在尝试使用blockUI但是虽然它没有错误地传递,但它不起作用
下面的代码都在$(document).ready()函数中
$("#btnSaveJob").click(function () {
if ($("#frmJobDetails").valid()) {
$("#frmJobDetails").submit();
}
});
$("#frmJobDetails").submit(function (e) {
$('#jobDetails').block({
message: 'Saving, please wait...',
centerX: true,
centerY: true,
css: {
width: '600px',
height: '300px',
border: '3px solid #FF9900',
backgroundColor: '#000',
color: '#fff',
padding: '25px'
}
});
submitNew('job');
e.preventDefault();
$('#jobDetails').unblock();
});
编辑以添加submitNew函数
function submitNew(submitType) { // various variables set here if (submitType == 'job') { PageMethods.SubmitJobForm(propID, dateReceived, targetResponse, targetComplete, chargeable, jobTypeID, jobTypeText, contractID, contractText, csJobTypeID, csJobTypeText, priorityID, priorityText, status, notes, fnsuccesscallbackJob, fnerrorcallback); } else if (submitType == 'instruction') { PageMethods.SubmitInstruction(fnsuccesscallbackInstruction, fnerrorcallback); } else { } }
必须添加这一点作为编辑抱怨我添加了太多的代码....
试试这个 :
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.66.0-2013.10.09/jquery.blockUI.js">
</script>
<script>
$(document).ready(function() {
$('#btnSubmit').on('click', function() {
$('#form').validate({
errorPlacement : function(error, element) {
error.insertBefore(element); // <- the default
},
rules : {
username : {
required : true
},
password : {
required : true,
},
},
messages : {
username : {
required : " Username required."
},
password : {
required : " Password required."
},
},
});
if($('#form').valid()){
$.blockUI({ message: 'Just a moment...</h1>' });
}
});
});
</script>
以当前方式,代码按以下顺序执行:
因此,由于提交函数是异步的,因此过早执行unblock而不是在提交过程完成时执行。
尝试在ajax调用的complete / done函数中移动unblock函数。
请确保包含这些库
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Optional-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
对于阻止添加此行$ .blockUI({message:'loading ...'});
for unblocking add $ .unblockUI();
功能测试() {
var rndomness="?rnd="+new Date().getTime()
var URL="XYZ"+rndomness
var snowId=document.getElementById("snowId").value;
var message = { snowId:snowId };
$.blockUI({ message: '<img src="resources/images/loadingajax.gif" /> Loading...' });
$.ajax({
type: "POST",
url : URL,
data: JSON.stringify(message),
contentType:"application/json; charset=utf-8",
cache: false,
success: function(response){
dowhatever u want to do with response
$.unblockUI();
}
});
}
在成功块中包含$ .unblokUI非常重要
在我的情况下,当ajax调用是同步的,不起作用,例如
asynch:false
不会工作,我设置asynch:true和BlockUI正在工作