блокUI не работает

У меня есть следующий код, в котором я использую блокировку пользовательского интерфейса, но он не блокирует страницу. Я использую вызов ajax, чтобы получить результат управления пользователем (частичное представление) для загрузки в div на странице. Во время вызова ajax я хочу заблокировать всю страницу, используя блокуи.

 $('#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 ;
    });

person amol    schedule 27.08.2012    source источник


Ответы (2)


Используйте индекс baseZ, чтобы заблокировать всю страницу, например.

$.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"} 
}); 
person donald123    schedule 27.08.2012
comment
применил это как $.blockUI({сообщение: '‹img src=/Content/images/ajax-loader.gif/›', baseZ: 9000, css: { top: ($(window).height() - 400) /2 + px, слева: ($(window).width() - 400) /2 + px, ширина: 400px } }); но не работает извините.. - person amol; 28.08.2012
comment
Почему вы приняли этот ответ, если он вам не помог? - person the_new_mr; 11.06.2014

Попробуйте использовать методы ajaxStart и ajaxStop jQuery. Это позволит вам применять загрузчик, когда начинается вызов ajax, и удалять его, когда он заканчивается.

person Ankur    schedule 27.08.2012
comment
Вместо использования другого плагина для блокировки пользовательского интерфейса проще всего связать ajaxStart и ajaxStop, которые по умолчанию предоставляются в jquery. - person Ankur; 27.08.2012
comment
спасибо за все ответы, но когда я закомментирую async: false, все работает !!! - person amol; 28.08.2012
comment
У меня была похожая проблема. Причина комментирования async: false, вероятно, связана с тем, что он вызывал разблокировку сразу после вызова блока, асинхронно ожидая завершения вызова ajax. Закомментировав async: false, вызов ajax будет выполняться синхронно, поэтому обработка будет остановлена ​​и будет ждать возврата вызова ajax, прежде чем будет выполнена разблокировка. - person the_new_mr; 11.06.2014