Intel XDK jQuery Mobile error when changing the page

StackOverflow https://stackoverflow.com/questions/22819175

Question

I've just started with a simple jQuery Mobile app in Intel XDK. There are only two pages (views) and a button to show the second page from the main one.

Below is the code untouched (as produced by the visual designer).

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <style type="text/css">
        /* Prevent copy paste for all elements except text fields */
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
        input, textarea  { -webkit-user-select:text; }
    </style>
    <script src="intelxdk.js"></script>
    <script type="text/javascript">
        /* This code is used to run as soon as Intel activates */
        var onDeviceReady=function(){
        //hide splash screen
        intel.xdk.device.hideSplashScreen();
        };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
    </script>
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
    <script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body>
    <!-- content goes here-->
    <div class="uwrap">
        <div class="upage" id="mainpage" data-role="page">
            <div class="upage-outer">
                <div class="upage-content" id="mainsub">
                    <div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
                        <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
                            <div class="widget-container content-area vertical-col">
                                <div class="widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" id="page1-line1">
                                    <div class="widget-container left-receptacle"></div>
                                    <div class="widget-container right-receptacle"></div>
                                    <div>
                                    <p>Text in page-1</p>
                                    </div>
                                </div><a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gotoP2">goto Page2</a><span class="uib_shim"></span>
                            </div>
                        </div>
                        <span class="uib_shim"></span>
                    </div>
                </div>
                <!-- /upage-content -->
            </div>
            <!-- /upage-outer -->
        </div>
        <div class="upage" id="secondPage" data-role="page">
            <div class="upage-outer">
                <div id="secondPagesub" class="upage-content ">
                    <div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
                        <div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
                            <div class="widget-container content-area vertical-col">
                                <div class="widget uib_w_2 d-margins" data-uib="media/text" data-ver="0" id="page2-line1">
                                    <div class="widget-container left-receptacle"></div>
                                    <div class="widget-container right-receptacle"></div>
                                    <div>
                                        <p>Text in page 2</p>
                                    </div>
                                </div><span class="uib_shim"></span>
                            </div>
                        </div>
                        <span class="uib_shim"></span>
                    </div>
                </div>
            </div>
            <!-- /upage-outer -->
        </div>
        <!-- /upage -->
    </div>
    <!-- /uwrap -->
</body>

And the index_user_scfripts.js file:

(function()  {
 "use strict";
  function register_event_handlers()   {
        $("#gotoP2").click(function(evt)  {
        $("body").pagecontainer("change", "secondPage", { reverse: false});
        });
}
 $(document).ready(register_event_handlers);
})();

When I hit the button in the first page, the debugger throw a JavaScript error in jquery.min.js file:

Uncaught Error: cannot call methods of pagecontainer prior to initialization; attempted to call method "change"

Any sugestion are wellcome.

Was it helpful?

Solution

The problem was in the method to call the page change. Instead the original, the index_user_scripts.js must be:

(function() {
   "use strict";
   function register_event_handlers()  {
       $("#gotoP2").click(function(evt)  {
           $(":mobile-pagecontainer").pagecontainer("change", "#secondPage", { reverse: false});
       });
   }
   $(document).ready(register_event_handlers);
})();
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top