locked
WinJS.Navigation.navigate problem on navigate to old pages.

    Question

  • I create a new project using navigation template. After creating page page.html, page1.html and page2.html, i try to use winjs .navigation.navigate to switch between page. However, when i try to navigate to the page i pass before, the program just stop and cannot navigate anymore. Here are the code for all my tryout.

    home.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>homePage</title>
        
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
        
        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/home/home.css" rel="stylesheet" />
        <script src="/pages/home/home.js"></script>
    </head>
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle" onclick="changepage()">Welcome to App5!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
        </div>
    </body>
    </html>


    home.js

    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/pages/home/home.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
                //WinJS.Navigation.navigate("./pages/page.html");
            }
        });
        
    })();
    function changepage() {
        console.log("go to page");
        WinJS.Navigation.navigate("./pages/page.html");
    }

    page.html

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
                WinJS.UI.Pages.define("/pages/page.html", {
                    // This function is called whenever a user navigates to this page. It
                    // populates the page elements with the app's data.
                    ready: function (element, options) {
                        // TODO: Initialize the page here.
                        //WinJS.Navigation.navigate("./pages/page1.html");
                    }
                });
                function changepage() {
                    console.log("go to page 1");
                    WinJS.Navigation.navigate("./pages/page1.html");
                }
            </script>
        </head>
        <body>
            <p onclick="changepage()">page1 page1page1page1page1page1page1page1page1page1page1page1</p>
        </body>
    </html>

    page1.html

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
                WinJS.UI.Pages.define("/pages/page1.html", {
                    // This function is called whenever a user navigates to this page. It
                    // populates the page elements with the app's data.
                    ready: function (element, options) {
                        // TODO: Initialize the page here.
                        //WinJS.Navigation.navigate("./pages/home/home.html");
                        var text = document.getElementById("text");
                      
                    }
                });
                function changepage() {
                    console.log("go page 2");
                    WinJS.Navigation.navigate("./pages/page2.html");
                }
            </script>
        </head>
        <body>
            <p id="text" onclick="changepage()">safsal;gmksa;lgmsa;lmgf;lsamf;lsamf;lsamg;lsamg;lasmg;lsamg;lasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
        </body>
    </html>

    page2.html
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
                WinJS.UI.Pages.define("/pages/page2.html", {
                    // This function is called whenever a user navigates to this page. It
                    // populates the page elements with the app's data.
                    ready: function (element, options) {
                        // TODO: Initialize the page here.
                        //WinJS.Navigation.navigate("./pages/home/home.html");
                        var text = document.getElementById("text");
    
                    }
                });
                function changepage() {
                    console.log("back to page");
                    WinJS.Navigation.navigate("./pages/page.html");
                }
            </script>
        </head>
        <body>
            <p id="text" onclick="changepage()">page 2 page 2 page2 page2s</p>
        </body>
    </html>


    • Edited by Oakint Wednesday, August 29, 2012 10:08 AM wrong header
    Wednesday, August 29, 2012 10:08 AM

Answers

  • Hi Oak,

    Start by learning about Single page navigation here:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx

    Also learn about techniques for programming by starting here and working through the links in this document:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh780660.aspx

    What you should learn through the above documents:

    1.  When you add your pages to the project, use the PageControl item.  This provides the JS, CSS, and HTML files you need for each page.

    2.  Do not include <script> tags in your HTML.  There should be a separation between the JavaScript and HTML.  Not only will this allow your app to perform better (this is the only way to precompile the script), this is the way you should be using the templates and when you add pages to the project, this is how the templates create these files anyhow.

    3.  Do not use globally scoped JavaScript functions, ensure they are always defined in the page anonymous function provided so you do not stomp on the already defined functions.  For example in each of your pages' .js files define your changepage function and call it internal to the anonymous function that defines your page.  Then you would hook it up similar to this:

    4.  You should hook up the event handlers and functions inside your js code so the functions are all contained in the code and are not in the global namespace.

    Finally,

    After you look at everything above, you may be fighting against problems that are already fixed.  Please move to Windows 8 RTM and test.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, August 29, 2012 8:17 PM
    Moderator