Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jingwei
295
Loading slow pages
posted

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!

Parents
No Data
Reply
  • 24497
    posted

    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()">

Children