blockUI is not working
-
28-06-2021 - |
سؤال
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 ;
});
المحلول
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"}
});
نصائح أخرى
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.
لا تنتمي إلى StackOverflow