Hello,
have issue when partial postback is performed I display a progress modal, after partial post back it stays stuck. Also I want to note this happens sometimes, how can I ensure that the progress modal is close after processing is complete everytime, I tried the RequestEnd, and pageLoaded event doesn't seem to do the trick.
<script type="text/javascript">
Sys.Application.add_init(appl_init);
// Sys.Application.add_load(WireEvents_<%=this.ID%>);
// $(WireEvents_<%=this.ID%>);
function appl_init() {
var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
pgRegMgr.add_beginRequest(BeginRequestHandler);
pgRegMgr.add_endRequest(EndRequestHandler);
pgRegMgr.add_pageLoaded(PageLoadedHandler);
}
function WireEvents_<%=this.ID%>() {
var isBoolBreak = true;
if (isBoolBreak) {
}
};// end WireEvents_
function BeginRequestHandler() {
// beforeAsyncPostBack
//var curtime = new Date();
//alert('Time before PostBack: ' + curtime);
var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
//if (pgRegMgr.get_isInAsyncPostBack()) {
ShowProgress();
//}
}
function EndRequestHandler() {
// afterAsyncPostBack
//var curtime = new Date();
//document.getElementById('Label1').innerHTML = 'Time after PostBack: ' + curtime;
var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
//if (pgRegMgr.get_isInAsyncPostBack()) {
EnsureHideProgress();
//}
}
function PageLoadedHandler(sender, args) {
EnsureHideProgress();
}
</script><script>
function dPbtnSaveClick() {
$("#btnSave").click();
}
function dpBtnCancelClick() {$("#btnCancel").click();
}
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.attr('id', 'divModalMask');
modal.attr('style', 'display:block;');
modal.addClass("modal");$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
function EnsureHideProgress() {
var modal = $("#divModalMask");
//modal.attr('style', 'display:none;');
modal.remove();
var popup = $('#divPopup');
popup.attr('style', 'display:none;');
}</script><style type="text/css">
.modal {
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
/*border: 5px solid #67CFF5;*/
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: transparent; /*white*/
z-index: 999;
}
.GrdHeaderCaption {
font-size: smaller;
}
</style><html><head><title></title><head><body><form id="form1"><asp:UpdatePanel ID="Update1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true"><Triggers><asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" /></Triggers><ContentTemplate></ContentTemplate></asp:UpdatePanel><div id="divPopup" class="loading" align="center">
Loading. Please wait.<br /><br /><img src="../images/loading_black.gif" alt="" /></div></form></body></html>