blockUI is not working

Question

I have folowing code where i am using block ui,but its not blocking the page.i am using ajax call to get user control result (partial view) to load into div in page.during ajax call i want to block the complete page using blockui.

 $('#btnGO').click(function() {


        if (validate()) {
            alert("loading");
            $.blockUI({ message: '<img src="/Content/images/ajax-loader.gif"/>' }); //this is not working

            $.ajax({

                type: "POST",
                url: "/Controller/action/", //to get the partial view
                async: false,
                cache: false,
                beforeSend: function() {

                },
                complete: function() {
                    alert("ajax complete event")
                    $.unblockUI(); 
                },

                data: $('#frmPassBook').serialize(),
                error: function(xhr, status, error) {
                    $('#ErrorMessage').html(xhr.responseText);
                    $("#ErrorMessage").stop().show('slow');
                    $('#ui-widget').show();
                    $.unblockUI();
                },
                success: function(data) {
                    $("#aCBDetails").parent().show();
                    $("#divCBDetails").hide("blind");
                    $("#aCBDetails span:first").removeClass("ui-icon-circle-triangle-n").addClass("ui-icon-circle-triangle-s");
                    $('#ui-widget').hide();
                   //loading html in div
                   $("#div").html(data);

if ($("#rbMain") != undefined) {

                        if ($("#rbMain").attr("checked")) {
                            $(".subTrId").hide();
                            $("#spSub").hide();
                            $("#spMain").show();

                        }
                        else {
                            $(".subTrId").show();
                            $("#spSub").show();
                            $("#spMain").hide();

                        }
                    } else {

                        $("#spSub").show();
                        $("#spMain").hide();
                    }

//unblocking after div is loaded with html
                   $.unblockUI();
                }
            });
        } else {

           $.unblockUI();

        }
        return false ;
    });

score 1 · Accepted Answer · answered Aug 27 '12 at 13:34

1

Use the baseZ index to block the whole page eg.

$.blockUI({ 
                                            message: "<img src="/Content/images/ajax-loader.gif"/>",
                                            baseZ: 9000,
                                            css: { 
                                                top:  ($(window).height() - 400) /2 + "px", 
                                                left: ($(window).width() - 400) /2 + "px", 
                                                width: "400px"} 
});

answered Aug 27 '12 at 13:34

donald123

5,638
3
26
23

applied this as $.blockUI({ message: '', baseZ: 9000, css: { top: ($(window).height() - 400) /2 + "px", left: ($(window).width() - 400) /2 + "px", width: "400px" } }); but its not working sorry.. – A_m0 Aug 28 '12 at 05:54
Why did you accept this answer if it wasn't what helped you? – the_new_mr Jun 11 '14 at 11:01

score 0 · Answer 2 · answered Aug 27 '12 at 13:23

0

Try using ajaxStart and ajaxStop methods of jQuery. These will enable you to apply loader as ajax call starts and remove it as it ends.

answered Aug 27 '12 at 13:23

Ankur

791
4
15

Instead of using another plugin to block the UI, the easier thing can be binding ajaxStart and ajaxStop that are provided by default in jquery. – Ankur Aug 27 '12 at 13:36
2

thanks for all the responses but when i comment out async: false its working !!! – A_m0 Aug 28 '12 at 05:48
2

I had a similar problem. The reason commenting out async: false works is likely because it was calling unblock immediately after calling block whilst asynchronously waiting for the ajax call to complete. Commenting out async: false would have made the ajax call perform synchronously so the processing would stop and wait for the ajax call to return before the unblock was performed. – the_new_mr Jun 11 '14 at 11:03

blockUI is not working

2 Answers2

Linked