JQuery BlockUI Not Working

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

Solution 1:

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>

Solution 2:

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.

Solution 3:

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

Solution 4:

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

Solution 5:

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