Modal popup during page load not hiding sometimes: ASP.NET C# Javascript Jquery
Question
I have an ajax modal pop-up that is being displayed during page load and then it hides when the page load has been completed, all of this code takes place within the master page. The problem is that for some button clicks they do not trigger the javascript event window.onload to be called or the pageload complete or render events within asp. They only call the before unload event and submit events. When this happens I notice that the popup does not hide because no window.onload was ever called. Otherwise it works wonderfully. Does anyone know a way that I can make sure the pop up gets hidden always without having to hide the pop up on every button clicks code that does not reload the entire page? See below for code.
Master Page:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="OnlinePrizing.SiteMaster" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
function showPopup(who) {
console.log("show called: " + who);
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hidepopup(who) {
console.log("hide called: " + who);
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
window.onbeforeunload = function () {
showPopup('window.onbeforeunload');
};
window.onsubmit = function () {
showPopup('window.onsubmit');
};
window.onload = function () {
hidepopup('window.onload');
};
</script>
<style type="text/css">
.modalBackground {
background-color:Blue;
filter:alpha(opacity=30);
opacity:0.3;
}
.modalPopup {
background-color:white;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true" runat="server"></asp:ToolkitScriptManager>
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
<asp:ModalPopupExtender runat="server" ID="programmaticModalPopup"
BehaviorID="programmaticModalPopupBehavior"
TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="programmaticPopup"
BackgroundCssClass="modalBackground"
DropShadow="True"
PopupDragHandleControlID="programmaticPopupDragHandle"
RepositionMode="RepositionOnWindowScroll" >
</asp:ModalPopupExtender>
<asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="display:none;width:350px;padding:10px">
<asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black;text-align:center;">
Processing... Please Wait...
</asp:Panel>
<br />
<div style="text-align:center;"><img src="images/loader.gif" /></div>
</asp:Panel>
<div class="page">
<div class="header">
<div class="title">
<h1>
<asp:Label ID="lblTitle" runat="server" Text="Home"></asp:Label><br />
</h1>
</div>
<div class="loginDisplay">
<asp:Label ID="LoginStatus" runat="server" Text="Not logged in."></asp:Label>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<DynamicMenuItemStyle CssClass="dynamic" />
<Items>
<asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/PrizeListing.aspx" Text="Prize Listing">
</asp:MenuItem>
<asp:MenuItem Text="Administration"
Value="Administration" Selectable="False">
<asp:MenuItem Text="Users" Value="Users" NavigateUrl="~/Admin.aspx?mode=users"></asp:MenuItem>
<asp:MenuItem Text="Prizes >" Value="Prizes" NavigateUrl="~/Admin.aspx?mode=prizes">
<asp:MenuItem Text="Prizes GL Codes" Value="Prizes GL Codes" NavigateUrl="~/PrizesGLCodes.aspx">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Tournaments >" Value="Tournaments" NavigateUrl="~/tournaments.aspx">
<asp:MenuItem Text="Tournament Templates" Value="Tournament Templates" NavigateUrl="~/TournamentTemplates.aspx">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Winners >" Value="Winners" NavigateUrl="~/Admin.aspx?mode=winners">
<asp:MenuItem Text="Issue Bounty Prizes" NavigateUrl="~/IssueBountyPrizes.aspx"></asp:MenuItem>
<asp:MenuItem Text="Merged\Banned Players" Value="Merged\Banned Players" NavigateUrl="~/BannedAndHiddenPlayers.aspx">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Inventory >" Value="Inventory"
NavigateUrl="~/Inventory.aspx">
<asp:MenuItem Text="Reconciliation Notes" Value="Reconciliation Notes"
NavigateUrl="~/ReconciliationNotes.aspx">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ReceiveInventory.aspx" Text="Receive Inventory"
Value="Receive Inventory"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Reports"
Value="Reports" Selectable="False">
<asp:MenuItem NavigateUrl="~/ReportsAllPrizes.aspx" Text="All Prizes"
Value="All Prizes"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ReportsPhysicalPrizes.aspx"
Text="Physical Prize Audit" Value="Physical Prize Audit"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ReportsReconciliation.aspx" Text="Reconciliation"
Value="Reconciliation"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ReportsExactTargetEmailHistory.aspx" Text="ExactTarget Email History"
Value="ExactTargetEmailHistory"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
You'll notice that the search button causes a girdview.databind which causes the page to call window.load. However, you'll notice that the export button does not call anything to reload the page so the window.load event is not triggered and this is where I hide the popup so it stays up forever.
This is one of the the pages.
the export button does not trigger window.load so it cannot hide the modal popup
1 answers
solution1
0 2014-11-24 20:14:22
You can handle this through the BeginRequestHandler and EndRequestHandler events. I think you need something like below and remove you other methods ( onload and onbeforeunload ). When the page request begins show the modal popup and when the page request ends then hide the modal popup. Refer my other answer here for similar problem like yours.
<script type="text/javascript">
function pageLoad(sender, args) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
}
function BeginRequestHandler(sender, args) {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function EndRequestHandler(sender, args) {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.