Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Receiving LoadCompleted while page not fully loaded?

Receiving LoadCompleted while page not fully loaded? Options
Previous Topic · Next Topic
Christian Porzio
Posted: Friday, June 30, 2017 1:48:27 PM
Rank: Advanced Member
Groups: Member

Joined: 10/4/2016
Posts: 104
Hi,

I have this page that triggers a LoadCompletedevent, yet I can tell all the scripts and elements in that page have not yet been loaded.

I assume you would like to test the page on your own or have one where the problem can be reproduced. Unfortunately this is not going to be possible because that page can be accessed only from our company VPN, and beside the issue surfaces when authentication is passed along.

But maybe you would still have an idea of what is going on or where I could keep digging.

I can tell the page is not completed because in debug mode, I have capture its html content after each LoadCompleted, and could clearly see significant differences between each content.

Only after I execute 3 manual reloads, then all the elements are loaded, and the iFrame has its src defined, hence the content now shows up.

What is really odd is that the initial LoadCompleted seems to be closer to the 3rd LoadCompleted than the 2nd - see below each page content.

When opening that same page from Chrome, I do not have that issue.

The best I can do for now is to show the html content after each LoadCompleted. Only on the 3rd one, the page finally shows up correctly.

Any idea what may happen here?

Thank you!

1rd LoadCompleted:
Code: HTML/ASPX 
<!DOCTYPE html>
<html manifest="../CACHE-MF/cache.manifest">
<head>
    <meta charset="utf-8">
    <meta name="currentPage" content="hostedapplication">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="/connectmeweb/dtagent_ICAjx_6000500161011.js" data-dtconfig="rid=RID_-1684300903|rpid=-2077571201|lab=1|reportUrl=/connectmeweb/dynaTraceMonitor|domain=aa.com|agentUri=/connectmeweb/dtagent_ICAjx_6000500161011.js"></script>
    <link rel="stylesheet" href="./../framework/jquery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="./../framework/jquery/jquery-ui-1.11.2.custom/jquery-ui.min.css">
    <script src="./../framework/jquery/jquery-min.js"></script>
    <script src="./../framework/jquery/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
    <script src="./../framework/jquery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="./../framework/Util/jquery.xml2json.js"></script>
    <script src="./../js/Util/migratorydata-client.js"></script>
    <script src="./../js/Util/iframeBridge.js"></script>
    <script src="../js/UI/defaultScreenUI.js"></script>
    <script src="../framework/Util/appconnect.js"></script>
    <script src="../js/Util/DialogManager.js"></script>
    <script src="../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="../js/Util/Constants.js"></script>
    <script src="../js/Util/Util.js"></script>
    <script src="./../framework/Util/HTEconnect.js"></script>
    <script src="./../framework/Util/DataContext.js"></script>
    <script src="./../framework/Util/appconnect.js"></script>
    <script src="./../js/UI/hostedapplicationScreenUI.js"></script>
    <script src="./../framework/Util/Events.js"></script>
    <script src="./../framework/Util/Logging.js"></script>
    <script src="./../framework/Util/DataContext.js"></script>
    <script src="./../framework/Handler/BaseHandler.js"></script>
    <script src="./../framework/device/DeviceManager.js"></script>
    <script src="./../framework/device/bridgeListener.js"></script>
    <script src="./../framework/device/Listeners.js"></script>
    <script src="./../framework/device/JavaBinder.js"></script>
    <script src="./../js/Util/Constants.js"></script>
    <script src="../framework/Handler/BaseHandler.js"></script>
    <script src="../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="./../framework/Util/json2.js"></script>
    <script src="../framework/jquery/jquery.mobile.simpledialog2.min.js"></script>
    <link rel="stylesheet" href="../framework/jquery/jquery.mobile.simpledialog.min.css">
    <script src="./../js/Util/DialogManager.js"></script>
    <script src="./../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <link rel="stylesheet" href="./../css/connectme.css">
    <link rel="stylesheet" href="../css/dialogmanager.css">
    <link rel="stylesheet" href="./../css/background_plain.css">
</head>
<body class="hostedapp">
    <div data-theme="none" id="wrapper">
        <div data-role="panel" id="popupPanel1" data-theme="a" data-position="right" data-dismissible="false" data-display="push" class="popup-panel ui-responsive-panel">
            <div class="close-panel" id="closePanel">
                <a href="#popupPanel1" data-role="button" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left ui-btn-inline ui-btn-icon-notext">close</a>
            </div>
            <iframe src="" name="connectMeFrame" id="connectMeFrame">
                Browser does not support iFrame. Please contact your administrator.
            </iframe>
            <div id="hosted-menu-footer" data-theme="b" class="ui-bar ui-bar-b">
            </div>
        </div>
        <iframe src="" name="hostedAppFrame" id="hostedAppFrame">
            Browser does not support iFrame. Please contact your administrator.
        </iframe>
    </div>


</body>
</html>



2nd LoadCompleted:
Code: HTML/ASPX 
<!DOCTYPE html>
<html manifest="../CACHE-MF/cache.manifest">
<head>
    <meta charset="utf-8">
    <meta name="currentPage" content="hostedapplication">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="/connectmeweb/dtagent_ICAjx_6000500161011.js" data-dtconfig="rid=RID_-1684300903|rpid=-2077571201|lab=1|reportUrl=/connectmeweb/dynaTraceMonitor|domain=aa.com|agentUri=/connectmeweb/dtagent_ICAjx_6000500161011.js"></script>
    <link rel="stylesheet" href="./../framework/jquery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="./../framework/jquery/jquery-ui-1.11.2.custom/jquery-ui.min.css">
    <script src="./../framework/jquery/jquery-min.js"></script>
    <script src="./../framework/jquery/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
    <script src="./../framework/jquery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="./../framework/Util/jquery.xml2json.js"></script>
    <script src="./../js/Util/migratorydata-client.js"></script>
    <script src="./../js/Util/iframeBridge.js"></script>
    <script src="../js/UI/defaultScreenUI.js"></script>
    <script src="../framework/Util/appconnect.js"></script>
    <script src="../js/Util/DialogManager.js"></script>
    <script src="../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="../js/Util/Constants.js"></script>
    <script src="../js/Util/Util.js"></script>
    <script src="./../framework/Util/HTEconnect.js"></script>
    <script src="./../framework/Util/DataContext.js"></script>
    <script src="./../framework/Util/appconnect.js"></script>
    <script src="./../js/UI/hostedapplicationScreenUI.js"></script>
    <link rel="stylesheet" href="./../css/connectme.css">
    <link rel="stylesheet" href="../css/dialogmanager.css">
    <link rel="stylesheet" href="./../css/background_plain.css">
</head>
<body class="hostedapp">
    <div data-theme="none" id="wrapper">
        <div data-role="panel" id="popupPanel1" data-theme="a" data-position="right" data-dismissible="false" data-display="push" class="popup-panel ui-responsive-panel">
            <div class="close-panel" id="closePanel">
                <a href="#popupPanel1" data-role="button" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left ui-btn-inline ui-btn-icon-notext">close</a>
            </div>
            <iframe src="" name="connectMeFrame" id="connectMeFrame">
                Browser does not support iFrame. Please contact your administrator.
            </iframe>
            <div id="hosted-menu-footer" data-theme="b" class="ui-bar ui-bar-b">
            </div>
        </div>
        <iframe src="" name="hostedAppFrame" id="hostedAppFrame">
            Browser does not support iFrame. Please contact your administrator.
        </iframe>
    </div>


</body>
</html>


3rd LoadCompleted:
Code: HTML/ASPX 
<!DOCTYPE html>
<html manifest="../CACHE-MF/cache.manifest" class="ui-mobile">
<head>
    <base href="https://connectme-stage.aa.com/connectmeweb/html/hostedapplication.html?appname=brr_beta">
    <meta charset="utf-8">
    <meta name="currentPage" content="hostedapplication">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="/connectmeweb/dtagent_ICAjx_6000500161011.js" data-dtconfig="rid=RID_-1684300903|rpid=918305128|lab=1|reportUrl=/connectmeweb/dynaTraceMonitor|domain=aa.com|agentUri=/connectmeweb/dtagent_ICAjx_6000500161011.js"></script>
    <link rel="stylesheet" href="./../framework/jquery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="./../framework/jquery/jquery-ui-1.11.2.custom/jquery-ui.min.css">
    <script src="./../framework/jquery/jquery-min.js"></script>
    <script src="./../framework/jquery/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
    <script src="./../framework/jquery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="./../framework/Util/jquery.xml2json.js"></script>
    <script src="./../js/Util/migratorydata-client.js"></script>
    <script src="./../js/Util/iframeBridge.js"></script>
    <script src="../js/UI/defaultScreenUI.js"></script>
    <script src="../framework/Util/appconnect.js"></script>
    <script src="../js/Util/DialogManager.js"></script>
    <script src="../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="../js/Util/Constants.js"></script>
    <script src="../js/Util/Util.js"></script>
    <script src="./../framework/Util/HTEconnect.js"></script>
    <script src="./../framework/Util/DataContext.js"></script>
    <script src="./../framework/Util/appconnect.js"></script>
    <script src="./../js/UI/hostedapplicationScreenUI.js"></script>
    <script src="./../framework/Util/Events.js"></script>
    <script src="./../framework/Util/Logging.js"></script>
    <script src="./../framework/Util/DataContext.js"></script>
    <script src="./../framework/Handler/BaseHandler.js"></script>
    <script src="../js/Handler/hostedapplicationScreenHandler.js"></script>
    <script src="./../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="../js/Handler/defaultScreenHandler.js"></script>
    <script src="./../framework/Handler/BaseScreenHandler.js"></script>
    <script src="./../js/Handler/logoutScreenHandler.js"></script>
    <script src="./../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="../framework/Util/Request.js"></script>
    <script src="./../framework/device/DeviceManager.js"></script>
    <script src="./../framework/device/bridgeListener.js"></script>
    <script src="./../framework/device/Listeners.js"></script>
    <script src="./../framework/device/JavaBinder.js"></script>
    <script src="./../js/Util/Constants.js"></script>
    <script src="../framework/Handler/BaseHandler.js"></script>
    <script src="../js/Handler/hostedapplicationScreenHandler.js"></script>
    <script src="./../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="../js/Handler/defaultScreenHandler.js"></script>
    <script src="./../framework/Handler/BaseScreenHandler.js"></script>
    <script src="./../js/Handler/logoutScreenHandler.js"></script>
    <script src="./../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="../framework/Util/Request.js"></script>
    <script src="../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <script src="./../framework/Util/json2.js"></script>
    <script src="../framework/jquery/jquery.mobile.simpledialog2.min.js"></script>
    <link rel="stylesheet" href="../framework/jquery/jquery.mobile.simpledialog.min.css">
    <script src="./../js/Util/DialogManager.js"></script>
    <script src="./../framework/Util/DialogHandler.js"></script>
    <link rel="stylesheet" type="text/css" href="../framework/jquery/dialog.css">
    <link rel="stylesheet" href="./../css/connectme.css">
    <link rel="stylesheet" href="../css/dialogmanager.css">
    <link rel="stylesheet" href="./../css/background_plain.css">
    <title></title>
</head>
<body class="hostedapp ui-mobile-viewport ui-overlay-a">
    <div data-role="page" data-url="/connectmeweb/html/hostedapplication.html?appname=brr_beta" tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
        <div data-theme="none" id="wrapper">
            <div data-role="panel" id="popupPanel1" data-theme="a" data-position="right" data-dismissible="false" data-display="push" class="popup-panel ui-responsive-panel ui-panel ui-panel-position-right ui-panel-display-push ui-panel-closed ui-body-a ui-panel-animate">
                <div class="ui-panel-inner">
                    <div class="close-panel" id="closePanel">
                        <a href="#popupPanel1" data-role="button" class="ui-btn ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-inline ui-shadow ui-corner-all" role="button">close</a>
                    </div><iframe src="" name="connectMeFrame" id="connectMeFrame" style="height: 0px; display: none;">
                        Browser does not support iFrame. Please contact your administrator.
                    </iframe><div id="hosted-menu-footer" data-theme="b" class="ui-bar ui-bar-b" style="height: 46px; display: none;"><div data-role="navbar" style="vertical-align: middle !important;" class="ui-navbar" role="navigation"><ul style="vertical-align: middle;" class="ui-grid-a"><li onclick="handleMenu(0);" class="ui-block-a"><a href="#" class="ui-link ui-btn"><img src="../images/HostAppIcon_Transparent.png" width="20px" height="20px" style="padding:0;margin:0;"><br>RDB</a></li><li onclick="handleMenu(11);" class="ui-block-b"><a href="#" class="ui-link ui-btn"><img src="../images/MenuIcon_Transparent.png" width="20px" height="20px" style="padding:0;margin:0;"><br>Menu</a></li></ul></div></div>
                </div>


            </div>
            <iframe src="https://rampops-beta-stage-cdc.aa.com/portal/brrweb/html/home.jsp" name="hostedAppFrame" id="hostedAppFrame">
                Browser does not support iFrame. Please contact your administrator.
            </iframe>
        </div>


    </div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default" style="top: 100px;"><span class="ui-icon-loading"></span><h1>loading</h1></div>
</body>
</html>
Back to top
 
eo_support
Posted: Friday, June 30, 2017 3:38:25 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,225
Hi,

This either has to do with cache or dynamically created contents, most likely has to do with dynamically created contents. When you have JavaScript that dynamically creates/loads contents, loadCompleted event is usually fired BEFORE those contents are created. This is because JavaScript can create contents at any time, so it is impossible for the loader to know when the JavaScript is done (in fact some JavaScript will never be done, such as a digital clock). Because of this, the loader will fire loadCompleted event as soon as the "initial" contents is loaded. There are many web pages that only has a blank body or div element and dynamically load/generates everything through script. For those page the loadCompleted event will be fired as soon as the initial empty body is loaded.

For those cases you can not rely on our loaded event, you must rely on your particular page's specific event. For example, Google Map dynamically loads/updates the image tiles and it has an event that is fired when all tiles are updated. If you want to perform some additional task when the page is ready, you will want to hook up those kind of events instead.

Thanks!
Back to top
 
Christian Porzio
Posted: Friday, June 30, 2017 5:05:48 PM
Rank: Advanced Member
Groups: Member

Joined: 10/4/2016
Posts: 104
Thank you! It was indeed a caching issue. My application was configured to clear the cache on startup but my mistake was that I did it even for a new page created within that session. Once I fixed this, this inconsistent loading situation was resolved.

Regards
Back to top
 
eo_support
Posted: Friday, June 30, 2017 5:24:16 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,225
Great. Glad to hear that you resolved the issue!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.