I am using the updateProgress control to display loader.gif while the iframe in my page loads.
The iframe takes much time to load but the loader.gif does not appear
This is my aspx page
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial;
}
.MyModal {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center {
z-index: 1000;
margin: 300px 400px 300px 400px;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img {
height: 128px;
width: 128px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>My Payment Page</h1>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="MyModal">
<div class="center">
<img alt="" src="images/my-loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<iframe id="frame1" runat="server" width="100%" height="600" scrolling="no" frameborder="0"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
</form> </body> </html>
and in my code behind file i set the source for the iframe programmatically
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
frame1.Src = "http://example.com";
}
}
I don't know what i am missing.
UpdateProgress controls are for partial-page updates (AJAX requests); they do not respond to normal postbacks.
To see it work, put a button control inside the UpdatePanel (content template). Because it's inside the update panel it makes an AJAX request (basically) so the UpdateProgress control should work automatically.
If the response is really fast, you might not see the UpdateProgress control's image. For testing, add some time to the response so you can see the image.