I am showing a popup window inside a WebDialogWindow .
The first time the popup is opened, everything is looking fine.
However the second time the popup is opened with w.show(), it flickers significantly when loading.
That flicker bothers me very much, if you have an idea how to eliminate this problem.
In Internet Explorer 8 and Chrome 19 the flicker is the most visible. (Windows XP SP3)
Safari 5.1.5 and Firefox 12 appear to be nicer or I do not see the annoying flicker...
I am using NetAdvantage 2011 vol 2 Version=11.2.20112.2086
Screen capture and project are attached, any help would be highly appreciated, thank you.
Default.aspx
w = $find('<% =WebDialogWindow1.ClientID %>');
var pane = w.get_contentPane();
pane.set_contentUrl('AnotherWindow.aspx');
w.show();
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server"
style="z-index: 100; left: 184px; top: 228px; position: absolute; height: 376px; width: 456px;"
Modal="True">
<ContentPane ScrollBars="Hidden">
<Template>
</Template>
</ContentPane>
</ig:WebDialogWindow>
Popup.aspx
<html>
<head runat="server">
<title>Edit details</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm1" runat="server"> </asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="10pt"
Style="z-index: 104; left: 28px; position: absolute; top: 28px" Text="Time1:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"
style="z-index: 100; left: 120px; top: 28px; position: absolute"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="10pt"
Style="z-index: 105; left: 28px; position: absolute; top: 54px; "
Text="Time2: "></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Style="z-index: 106; left: 120px; position: absolute;
top: 54px;" ></asp:TextBox>
<asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="10pt"
Style="z-index: 105; left: 32px; position: absolute; top: 80px; "
Text="Enabled: "></asp:Label>
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
style="z-index: 102; left: 112px; top: 76px; position: absolute;"
Font-Names="Arial" Font-Size="10pt" RepeatDirection="Horizontal" >
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
</div>
</form>
</body>
</html>
A workaround would be that after closing the popup, to call:
w.get_contentPane().set_contentUrl('about:blank');
However this is not a solution either, because it enables the 'Back' button of the browser and this is not acceptable.
Hi Matia,
Thank you for sample.I tried to run it in IE9/8/7, Chrome, Safari, Firefox and Opera, but could not reproduce flickering. Though, I have Windows7 and that can be the reason.In your sample the contentUrl is reset on each show-dialog action. That statement reloads src of iframe and I guess it can be a source of flickering: iframe shows old url and at once reloads it. It is similar to click on "reload" button of browser.I suggest you to avoid reload by setting ContentUrl on server or adding a dynamic check: if (pane.get_contentUrl() != 'AnotherWindow2.aspx') pane.set_contentUrl('AnotherWindow2.aspx');
If your application requires reloading content of dialog on each "open", then I can suggest to "unload" old url on close-dialog action. Example:
<script type="text/javascript"> function WebDialogWindow1_WindowStateChanged(sender, eventArgs) { if (sender.get_windowState() == $IG.DialogWindowState.Hidden) sender.get_contentPane().set_contentUrl('BLOCKED SCRIPT""'); }</script><ig:WebDialogWindow ID="WebDialogWindow1" ...> <ClientEvents WindowStateChanged="WebDialogWindow1_WindowStateChanged" /></ig:WebDialogWindow>
If that will not fix flickering, then you may try to show dialog with delay, or show it, make invisible and return visibility with delay.
Example to show with delay:
pane.set_contentUrl('AnotherWindow2.aspx');setTimeout(function(){ w.show(); }, 200);Example to make dialog temporary invisible:
pane.set_contentUrl('AnotherWindow2.aspx');w.show();w.get_element().style.visibility = 'hidden';setTimeout(function(){ w.get_element().style.visibility = 'visible'; }, 200);