jQuery blockUI not working

Question

I'm trying to use blockUI but although it passes over with no errors, it doesn't work

the code below is all within the $(document).ready() function

$("#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

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

@SaidKholov everything else works as it should - the submitNew function is called — leddy, Apr 22 '15 at 11:31
`unblock()` should be executed when your request is finish and not on submit — DrKey, Apr 22 '15 at 11:33
Is the submitNew an asynchronous function? If so, block() works perfectly but is directly unblocked. You should wait for submitNew to complete before unblocking. — mhu, Apr 22 '15 at 11:37
@leddy exactly, I guess you call async in your `submitNew()` function, so `unblock()` is executed just after your `block()` — DrKey, Apr 22 '15 at 11:41

score 4 · Accepted Answer · answered Apr 22 '15 at 17:10

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>

score 3 · Answer 2 · answered Apr 22 '15 at 11:38

3

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.

Try to move the unblock function in the complete/done function of the ajax call.

answered Apr 22 '15 at 11:38

Irvin Dominin

29,799
9
75
107

I've moved the unblock to the end of the submitNew function and it's still not being called – leddy Apr 22 '15 at 15:18
1

Not at the end of the function INSIDE tha ajax call, probably called in the function SubmitJobForm or in an inner – Irvin Dominin Apr 22 '15 at 16:47

score 1 · Answer 3 · answered Jan 23 '17 at 12:12

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

for unblocking add $.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

score 1 · Answer 4 · answered Dec 20 '17 at 08:17

1

In my case when the ajax call is synchronous that doesn't work e.g

 asynch:false

will not work, i set asynch:true and BlockUI is working

answered Dec 20 '17 at 08:17

umer

726
1
8
27

Thanks! you saved me1 – Yirga Mar 28 '19 at 08:48

score 0 · Answer 5 · answered Apr 16 '20 at 05:44

0

In my case when the ajax call is synchronous that doesn't work too

so I set async: true in my ajax code block and BlockUI is working

 async: true

answered Apr 16 '20 at 05:44

Bryant

1

jQuery blockUI not working

5 Answers5

Linked