jQuery blockUI 不工作

Question

我正在尝试使用 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 {

    }

}

必须添加这一点，因为编辑抱怨我添加了太多代码....

Answer 1

在当前的代码执行顺序中：

块
提交函数，我认为是异步的
解锁

因此，由于提交函数是异步的，所以取消阻止执行得太早，而不是在提交过程完成时执行。

尝试在 ajax 调用的 complete/done 函数中移动解锁函数。

Answer 2

试试这个：

<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>

Answer 3

请确保包含这些库

<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...' });

解锁添加 $.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 很重要

Answer 4

在我的例子中，当 ajax 调用是同步的时不起作用，例如

 asynch:false

不会工作，我设置了 asynch:true 并且 BlockUI 正在工作

Answer 5

在我的例子中，ajax 调用是同步的，但也不起作用

所以我在我的 ajax 代码块中设置了 async: true 并且 BlockUI 正在工作

 async: true

jQuery blockUI 不工作

jQuery blockUI not working

javascript

jquery

jquery-blockui