javascript jQuery blockUI 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29796115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery blockUI not working
提问by leddy
I'm trying to use blockUI but although it passes over with no errors, it doesn't work
我正在尝试使用 blockUI，但尽管它没有错误地通过，但它不起作用
the code below is all within the $(document).ready() function
下面的代码都在 $(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();
});
edit to add in the submitNew function
编辑以添加 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 { } }
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 { } }
have to add this bit in as editor complaining I've added too much code....
必须添加这一点，因为编辑器抱怨我添加了太多代码....
回答by Gurkha
Try this :
试试这个 ：
<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>
回答by Irvin Dominin
In the current way the code is executed in the order:
在当前方式中，代码按以下顺序执行：
- block
- submit function, async I think
- unblock
- 堵塞
- 提交功能，我认为是异步的
- 解除封锁
so since the submit function is async the unblock is executed too early and not when the submit process completes.
所以由于提交函数是异步的，unblock 执行得太早，而不是在提交过程完成时执行。
Try to move the unblock function in the complete/done function of the ajax call.
尝试在ajax调用的complete/done函数中移动unblock函数。
回答by Amit Singh
Please make sure to include these libs
请确保包含这些库
<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>
For Blocking add this line $.blockUI({ message: ' loading...' });
对于阻塞添加这一行 $.blockUI({ message: ' loading...' });
for unblocking add $.unblockUI();
解锁添加 $.unblockUI();
function test() {
功能测试（） {
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();
}
});
}
It is important that you have $.unblokUI inside success block
在成功块中有 $.unblokUI 很重要
回答by umer
In my case when the ajax call is synchronous that doesn't work e.g
在我的情况下，当 ajax 调用是同步的时，它不起作用，例如
asynch:false
will not work, i set asynch:true and BlockUI is working
不起作用，我设置了 asynch:true 并且 BlockUI 正在工作
回答by Bryant
In my case when the ajax call is synchronous that doesn't work too
在我的情况下，当 ajax 调用是同步的时，它也不起作用
so I set async: true in my ajax code block and BlockUI is working
所以我在我的 ajax 代码块中设置了 async: true 并且 BlockUI 正在工作
async: true
