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);
In the end I used this trick that eliminates the flicker on Windows XP SP3.
setTimeout(function(){ w.show(); }, 0);
Incredible but true, it is a bit crazy but it works. Thank you very much!
I have found another better solution to eliminate the flicker,
The JavaScript code below has been adapted from the Infragistics code of the get_iframe() function
Each time the popup is shown, the iFrame is deleted and recreated.
//remove the iFrame first
var div = w.getBody();
var nodes = div ? div.childNodes : null;
if (nodes)
{
var len = nodes.length;
var elem = (len > 0) ? nodes[0] : null;
if(elem && elem.nodeName == '#text')
elem = nodes[1];
if (elem && elem.nodeName == 'IFRAME')
while (len-- > 0)
div.removeChild(nodes[len]);
}
w.get_contentPane().set_contentUrl('AnotherWindow.aspx');