[Solved] pageshow not fireing

Jeroen_v_1 · ‎04-24-2016

Using intelxdk 32.40 with app framework.

After a clean project installation my pageshow won't fire at all. Tried many different ways not sure what to do next.

I used it before but now it won't fire any page(before show/init/show).

This is the code i am using

$(document).on("pageshow",function(){
alert("pageshow event fired - the page is now shown");
});

this is the html

<!DOCTYPE html>
<html>
    <!--
  * Please see the included README.md file for license terms and conditions.
  -->

    <head>
        <link rel="stylesheet" type="text/css" href="app_framework/3.0/af.ui.css" data-ver="2">
        <link rel="stylesheet" type="text/css" href="app_framework/3.0/icons.min.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 -->
        <script type="application/javascript" src="lib/jquery.min.js"></script>
        <script type="application/javascript">
            $.afui.autoLaunch = false; //By default, it is set to true and you're app will run right away.  We set it to false to show a splashscreen
            /* This function runs when the content is loaded.*/
            $.afui.useOSThemes=false;
             $(document).ready(function(){
                setTimeout(function(){
                    $.afui.launch();
                },1500);
            });
        </script>
        <script type="application/javascript" src="app_framework/3.0/appframework.ui.min.js"></script>
        <script type="application/javascript" src="lib/appframework.js"></script>
        <script type="application/javascript" src="js/index_user_scripts.js"></script>
        <script type="application/javascript" src="xdk/ad/af_subpage.js"></script>
    </head>

    <body id="afui" class="v2">

        <!-- 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> -->
        <div class="upage vertical-col left view" id="mainpage" data-header="af-header-1" data-footer="none">
            <header class="container-group outer-element uib_w_2" data-uib="app_framework/header" data-ver="3" id="af-header-1">
                <h1></h1>
                <div class="widget-container wrapping-col single-centered"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-left"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-right"></div>
            </header>
            <div class="pages">
                <div class="upage-outer">
                    <div class="upage-content vertical-col left panel ac0" id="uib_page_1">

                    </div>
                </div>
            </div>
        </div>
        <div class="upage vertical-col left view" id="uib_page_2" data-header="af-header-0" data-footer="none">
            <header class="container-group outer-element uib_w_1" data-uib="app_framework/header" data-ver="3" id="af-header-0">
                <h1></h1>
                <div class="widget-container wrapping-col single-centered"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-left"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-right"></div>
            </header>
            <div class="pages">
                <div class="upage-outer">
                    <div class="upage-content vertical-col left panel ac0" id="uib_page_3">

                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

Jeroen_v_1 · ‎04-25-2016

Found the solution

Ordering the scripts differently makes it work

jQuery-mobile must be in last position.

Elroy_A_Intel · ‎04-25-2016

When using App Framework UI library, JQuery should be the last script in the HEAD.