If aspx files are inside tabs, and only one page is loaded at a time, how can we show visual status for slow loading pages to allow users to know that that tab/page is still loading? Something like AJAX update progress would be great, even text message would be fine.
I know iframe is used in this case, and we don't show status bar at the bottom.
Thanks!
Hi Chris,
In my sample for targetUrl aspx I used <body onload="loadUrl">. First, check if that function is hit: put inside of it a single linealert('loadUrl');If alert does not appear, then find alternative way to process 'load' event of target aspx (addEventListener, attachEvent, etc).If alert comes up, then replace it by linedebugger;and use Watch view to find objects. Particularly look at window.top/parent/opener/etc. You should find reference to main-page window and it should contain global javascript functions as its members (those functions maybe invisible in debug window, but name of main aspx will be enough to identify that window). If you can not find reference to main window from within target url aspx, then I do not have other suggestions.Note: codes which I send you, ran on my machine and showed/hide 'wait...'
Showing "wait..." is working, but hidding is not working.
loadUrl function in target page is not called.
In my case, tabs and target pages are added to WebTab by C# codes. Is this causing the problem?
Similar is possible only if TargetUrls are sever pages, so, I assume that it is the case.
The tab object on client has members elemIframe and getTargetUrlDocument(), but they have no use before target url is loaded. I can suggest you to process onload events in all your target aspx pages and call a function located in main page. For example, in main page you may create a function "setWaitVisibility" which will show or hide "wait..." element. When tab is changed (or initial load of main page) you may show "wait..." element, and TargetUrl was loaded, then you may hide that "wait..." element. I wrote an example for you. That will create "wait..." div element and insert it inside of content container of tab. It will be displayed when tab needs to load target url and it will be hidden when tab without url was selected or when target url was loaded. If some of urls are www, then you should add validation for that and treat them as tabs without target urls.
Main aspx:
<script type="text/javascript">var statusElement = null;function setWaitVisibility(url, oWebTab){ if(!url && (!statusElement || !statusElement._visible)) return; if(!url) { statusElement.style.display = 'none'; statusElement.style.visibility = 'hidden'; statusElement._visible = false; return; } if(statusElement == null) { statusElement = document.createElement('DIV'); var idOfContentPane = oWebTab.ID + '_cp'; var cp = document.getElementById(idOfContentPane); if(!cp) return; var style = statusElement.style; style.position = 'absolute'; style.background = '#F0F090';//yellow style.border = 'solid 1px #905020';//brown style.marginLeft = '10px'; style.marginTop = '70px'; cp.insertBefore(statusElement, cp.firstChild); } statusElement._visible = true; statusElement.innerHTML = 'Please wait while ' + url + ' is loading...'; statusElement.style.display = ''; statusElement.style.visibility = 'visible';}
function UltraWebTab1_InitializeTabs(oWebTab){ var oTab = oWebTab.getSelectedTab(); var url = oTab ? oTab.getTargetUrl() : null; setWaitVisibility(url, oWebTab);}
function UltraWebTab1_AfterSelectedTabChange(oWebTab, oTab, oEvent){ var url = oTab.getTargetUrl(); setWaitVisibility(url, oWebTab);}</script>
<igtab:UltraWebTab ID="UltraWebTab1" runat="server" Height="140px" Width="400px" LoadAllTargetUrls="False"> <ClientSideEvents AfterSelectedTabChange="UltraWebTab1_AfterSelectedTabChange" InitializeTabs="UltraWebTab1_InitializeTabs" /> <Tabs> <igtab:Tab Text="New Tab"></igtab:Tab> <igtab:Tab Text="New Tab"> <ContentPane TargetUrl="TargetUrl.aspx"></ContentPane> </igtab:Tab> </Tabs></igtab:UltraWebTab>
TargetUrl aspx:
<script type="text/javascript">function loadUrl(){ var win = window.top; if(win && typeof win.setWaitVisibility != 'function') win = null; if(!win) { win = window.parent; if(win && typeof win.setWaitVisibility != 'function') win = null; } if(!win) { win = window.opener; if(win && typeof win.setWaitVisibility != 'function') win = null; } if(win) win.setWaitVisibility();}</script>
<body onload="loadUrl()">