Software Archive
Read-only legacy content
17061 Discussions

App starts on the wrong page.

Nick_F_2
New Contributor III
‎09-02-2015 04:32 AM
1,260 Views

I have updated to V2366 and on loading an app from a previous version, it now starts on the wrong page, but even then that page is incomplete, it is missing the back button on the header.

I have 4 pages:- #mainpage, #uib_page_1, #uib_page_2 ans #uib_page_3

Mainpage contains the start page but when the app loads it jumps to #uib_page_1.

This happen in Emulate and Test through App Preview.

0 Kudos

Link Copied

11 Replies
Dale_S_Intel
Employee
‎09-02-2015 11:14 AM
1,260 Views

Are you using AppDesigner?

0 Kudos
Copy link
Nick_F_2
New Contributor III
‎09-02-2015 12:33 PM
1,260 Views

Yes

0 Kudos
Copy link
Dale_S_Intel
Employee
‎09-02-2015 04:23 PM
1,260 Views

I haven't been able to reproduce the problem yet.  Could you provide a simple example where you're seeing the problem?

 

Thanks!

Dale

 

0 Kudos
Copy link
Nick_F_2
New Contributor III
‎09-04-2015 01:19 AM
1,260 Views

Not sure how I can do that without providing the whole project. If I try to recreate it I'm sure it would fix the issue. The problem is opening an existing project.

0 Kudos
Copy link
Chris_P_Intel
Employee
‎09-04-2015 11:46 AM
1,260 Views

Which UI framework are you using?  They vary for how the starting page is determined. 

For Bootstrap and some of the others, the pages you want hidden at load have the "hidden" class applied to them. And the pages you want shown do not.

For jQueryMobile and App Framework it varies a bit.

 

Do you have your project under source control (like Git)?  It sounds like you do not.  If not, I cannot stress this enough as an absolute imperative. Using source control is one of the foundation stones of professional web and app development.

0 Kudos
Copy link
Nick_F_2
New Contributor III
‎09-05-2015 02:35 AM
1,260 Views

 

I'm using App Framework.

 

0 Kudos
Copy link
Nick_F_2
New Contributor III
‎09-08-2015 04:37 AM
1,260 Views

Bump, Anyone any thoughts on this. I have found that it is jumping to a page with a header that has been removed, but insists on showing the wrong page with the deleted header.

0 Kudos
Copy link
Chris_P_Intel
Employee
‎09-08-2015 09:19 AM
1,260 Views

For App Framework the page that is first in the HTML is the page that is loaded by default.  

If this isn't what you are seeing, make sure that you don't have an errant Javascript handler firing that might change the page.

0 Kudos
Copy link
Nick_F_2
New Contributor III
‎09-08-2015 10:39 AM
1,260 Views

I've checked my Javascript and index.html for errant page calls, but there aren't any unless I cannot see the wood for the trees. The first page in index.html is MainPage which should appear first.

Here is a segment of code for index.html, please also note that this problem occurred after opening the project in the latest version (2366). Before the update the project worked perfectly well after being created in an earlier version. I have the app installed on my iPhone and it works as it should.

<!DOCTYPE html>
<html>
    <!--
  * Copyright © 2012-2015, Intel Corporation. All rights reserved.
  * Please see the included README.md file for license terms and conditions.
  -->

    <head>
        <link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
        <link rel="stylesheet" type="text/css" href="app_framework/2.1/css/icons.min.css">
        <link rel="stylesheet" type="text/css" href="css/ipatrol.css">
        <meta charset="UTF-8">
        <title>Blank App Designer Cordova Web App Project Template</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <!--
  * The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.
  * Note that Windows device viewports work better when initialized using the @viewport CSS rule.
  * For a quick overview of "meta viewport" and @viewport, see this article:
  *   http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag
  * To see how it works, try your app on a real device with and without a "meta viewport" tag.
  * Additional useful references include:
  *   http://www.quirksmode.org/mobile/viewports.html
  *   http://www.quirksmode.org/mobile/metaviewport/devices.html
  *   https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
-->

        <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->

        <style>
            /* following three (cascaded) are equivalent to above three meta viewport statements */
            /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
            /* see http://dev.w3.org/csswg/css-device-adapt/ */
                @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
                @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
                /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
        </style>

        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">

        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->

        <!-- Recommended location for your JavaScript libraries -->
        <!-- These library references (below) are just examples to give you the general idea... -->
        <!-- <script src="lib/mc/hammer.js"></script> -->
        <!-- <script src="lib/ft/fastclick.js"></script> -->

        <!--
  * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"
  * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?
  * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.
  * You can safely ignore the error or comment out this line if you will not be developing a Cordova app.
-->
        <script src="cordova.js" id="xdkJScordova_"></script>

        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
        <!--            
            You may substitute jQuery for the App Framework selector library.
            See http://app-framework-software.intel.com/documentation.php#afui/afui_jquery
        -->
        <script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
        <script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>
        <script type="application/javascript" src="js/index_user_scripts.js"></script>
        <script type="application/javascript" src="xdk/ad/af_subpage.js"></script>
        <script type="text/javascript">
            $( document ).ready(function() {
                 loadSettings();
              });
        </script>
        <script src="http://debug-software.intel.com/target/target-script-min.js#ZiOlpueJa3A0O-hyNaVdLVVzTT15U9dSLZ7xvzyi4dY"></script>
        <script type="application/javascript" src="app_framework/pageChangeRepeater.js"></script>
    </head>

    <body id="afui">

        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->

        <header class="wrapping-col wrap-element uib_w_5 with-back" data-uib="app_framework/header" data-ver="2" id="af-header-1"><a class="button backButton">Back</a>
            <h1>Settings</h1>
        </header>
        <header class="wrapping-col wrap-element uib_w_10" data-uib="app_framework/header" data-ver="2" id="af-header-2">
            <h1>Scanned</h1>
        </header>
        <div class="uwrap" id="content">
            <div class="upage vertical-col" id="mainpage" data-header="none" data-footer="af-footer-0">
                <div class="widget uib_w_1 scale-image d-margins" data-uib="media/img" data-ver="0">
                    <figure class="figure-align">
                        <img src="images/splash-trans.png">
                        <figcaption data-position="bottom"></figcaption>
                    </figure>
                </div>
                <a id="button3" onclick="javascript:loadScan()">Scan Code</a>

            </div>

            <div class="panel">
                <div class="upage vertical-col left panel" id="uib_page_2" data-header="af-header-1" data-footer="none">
                    <div class="table-thing with-label widget uib_w_6 d-margins" data-uib="app_framework/input" data-ver="1">
                        <label class="narrow-control label-inline" for="deviceid" name="deviceid">DeviceID</label>
                        <input class="wide-control" type="text" id="deviceid">
                    </div>
                    <div class="table-thing with-label widget uib_w_7 d-margins" data-uib="app_framework/input" data-ver="1">
                        <label class="narrow-control label-inline">CompanyID</label>
                        <input class="wide-control" type="text" id="companyid" name="companyid">
                    </div><a name="confirm" onclick="javascript:checkBlanks()" data-transition="slide" id="confirm">Confirm ID</a>

0 Kudos
Copy link
Chris_P_Intel
Employee
‎09-09-2015 04:12 PM
1,260 Views

It looks like the code has been moved around a bit when you were editing it

<div class="panel">

This lone statement above looks wrong. I don't know if there is a matching </div> but that lone div with the panel class can be removed.

 

 

 

<div class="upage vertical-col" id="mainpage" data-header="none" data-footer="af-footer-0">

And this one is missing the panel class.  

 

I don't know if there are other changes. You should check to make sure everything is balanced.

 

0 Kudos
Copy link
Nick_F_2
New Contributor III
‎09-10-2015 02:14 AM
1,260 Views

Hi Chris

 

Thanks for that, this was the issue.

I added the Panel class to mainpage.

I removed the <div Panel>, there was a closing </div> but midway down the page, not enclosing anything. This fixed the issue.

My concern is that this changed as a result of opening the project in the latest version of XDK, without any editing.

I have also had issues where <> symbols have changed to %lt; and %gt; with in the code after opening the project.

0 Kudos
Copy link
Reply

Community support is provided Monday to Friday. Other contact methods are available here.

Intel does not verify all solutions, including but not limited to any file transfers that may appear in this community. Accordingly, Intel disclaims all express and implied warranties, including without limitation, the implied warranties of merchantability, fitness for a particular purpose, and non-infringement, as well as any warranty arising from course of performance, course of dealing, or usage in trade.

For more complete information about compiler optimizations, see our Optimization Notice.