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,
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()">
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?
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...'
In last sample I checked if body was rendered (offsetHeight). Similar can be done to any specific element or object on page. If it is <img> with large image, then you may add a listener to its load event. If there is initialize-javascript running, then you may hack into it (add notification when it is done), etc. If there is AJAX controls on page, then you may try add handler toSys.Application.add_load(loadUrl);If there is an Infragistics control, then you may igControl.ClientSideEvents.Initialize or similar.
Brutal force way did hide that div tag, but way too early. How to make sure page is fully loaded?
I am in doubt that AJAX or our package may destroy load functionality of a target aspx located in <iframe>. Awhile ago I had some issues with submit and iframes when jquiry.js was used. I do not remember details, but anyway I could do nothing about that, because debugging of that compressed file is next to impossible. Exceptions died in the middle of it (alone with my investigations).
You may run (view in browser) that target aspx as stand alone page. I expect that onload should work.
After that create a temporary page and insert in it something like<iframe src='YourTargetUrl.aspx' width="200px" height="200px"></iframe>and check again if onload alert appears.
Next insert that <iframe> line into page where webtab is located (with all fancy js objects) and check again for onload. Etc.
Maybe you will be able to find at which point onload disappears and do something to fix that.
If nothing helps, then you may try to process other events. In worst case scenario you may use brutal force like below
<script type="text/javascript">function checkLoad(){ if(document.body && document.body.offsetHeight > 10) { window.clearInterval(fnc); loadUrl(); }}var fnc = window.setInterval(checkLoad, 200);function loadUrl(){ ...}</script>
I use client side stuff to handle this, basicly I have a div tag (not unlike ajax-progress) with a animated loading gif etc. and just load "ALL" the controls as is no target url etc. just let them fully load and then use javascript to handle the show/hide of the progress.Something likefunction ShowProgress(){ var loadingDiv = document.getElementById('loading'); if (loadingDiv){ if (loadingDiv.style.display == 'none'){ loadingDiv.style.display == ''; setTimeout(FinishedLoading, 200); } }}
function FinishedLoading() { if (navigator.userAgent.indexOf('Firefox') != -1) { document.getElementById('loading').style.display = 'none'; } else { if (document.readyState.toLowerCase() == 'complete') { document.getElementById('loading').style.display = 'none'; } else { setTimeout(FinishedLoading, 200); } }}then on page load and/or at the bottom of the page I say ShowProgress()Note i did not test the above as I just wrote it and is just "similar" to what i do, I actually have a lot more going on thanjust progress etc. but in theory this should do what you are looking for. also checking user agentis not the best way to do things but firefox never sends a readyState hence why that check is there.you might want to just throw a try catch around document.readyState if it throws a error then thebrowser is something else like firefox, netscape etc.
My problem is load event handler is never hit. Tried both onload and attachEvent (tried it on IE) without success.
I use jQuery, AJAX, AJAX TK, and your package. Any ideas?