Home/ Questions/Q 8556959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:28:02+00:00

Ello! I have an app bar icon and on the click event – I

  • 0

Ello!

I have an app bar icon and on the click event – I added a function which has the following code: 

function homePage() {

    WinJS.Navigation.navigate("/home/homePage.html");

}

Now I have two files – homePage.html which is inside /home/ and the js file for the same.

There’s a simple button on html of id NextPage.

While in the homePage.js file, I have:

function () {
    "use strict";

    WinJS.UI.Pages.define("/home/homePage.html", {
        ready: function (element, options) {
           var button = document.getElementById("NextPage");
           button.addEventListener("click", GoToNextPage);
        }
    });
    function GoToNextPage() {
        WinJS.Navigation.navigate("/default.html");
    }

})();

But when I click the app bar icon – nothing happens 🙁

So what I plan to accomplish is that when someone clicks an appbar icon on default.html – the user switches to homePage.html (and then when I click the homePage button – it goes back) – but not even the initial page transfer is taking place.

This is embarrassing to ask but I can’t just fold my hands and wait for something magical to happen. I have been working on this for an hour – read videos and samples but it’s not working at all.

Would appreciate help – I can’t figure out what’s going wrong. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The WinJS.Navigation namespace provides state and history management, but it doesn’t actually do the navigation itself. To move from one page to another, you need to define a handler function for one of the events in the WinJS.Navigation namespace – this lets you respond to call to the WinJS.Navigation.navigate method in a way which makes sense for your app.

    As a demonstration, here is a homePage.html file which has a NavBar containing a command that will be the trigger for the navigation.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavProject</title>
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/homePage.js"></script>
</head>
<body>
     <div id="contentTarget">
            <h1>Select a page from the NavBar</h1>
    </div>
    <div id="navbar" data-win-control="WinJS.UI.AppBar" 
        data-win-options="{placement:'top'}">

        <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'NextPage', label:'Next Page', 
                icon:'\u0031', section:'selection'}">
        </button>  
    </div>
</body>
</html>

    Along with the NavBar, I have defined the div element whose id is contentTarget. This is the place in my content where the new file will be loaded when the user clicks the NavBar command.

    CLARIFICATION: All of the content that you want replaced needs to go into the contentTarget element. Otherwise you’ll get a mix of old and new content displayed.

    And here is the JavaScript file which wires it up (this is the homePage.js file which I added a script element for in the HTML file above):

    (function () {
    "use strict";

    WinJS.Navigation.addEventListener("navigating", function (e) {
        var elem = document.getElementById("contentTarget");

        WinJS.UI.Animation.exitPage(elem.children).then(function () {
            WinJS.Utilities.empty(elem);
            WinJS.UI.Pages.render(e.detail.location, elem)
                .then(function () {
                    return WinJS.UI.Animation.enterPage(elem.children)
                });
        });
    });

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        args.setPromise(WinJS.UI.processAll());

        navbar.addEventListener("click", function (e) {
            if (e.target.id == "NextPage") {
                WinJS.Navigation.navigate("/nextPage.html");
            }
        }, true);

    };
    app.start();
})();

    Notice how I have added a handler function for the WinJS.Navigation.navigating event. This event is triggered by a call to WinJS.Navigation.navigate and details of the navigation target are contained in the detail.location property of the event object.

    In this example, I clear out any content in my target element and replace it with the contents of the target file and animate the transition from one to the other.

    You only have to define one handler for the event. This means that if I have elements in nextPage.html that will lead to navigation, I just need to call WinJS.Navigation.navigate without needing to create a new event handler, like this:

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script>
            WinJS.UI.Pages.define("/nextPage.html", {
                ready: function () {
                    back.addEventListener("click", function () {
                        WinJS.Navigation.navigate("/homePage.html");
                    });
                }
            });
        </script>
    </head>
    <body>
        This is next page.
        <button id="back">Back</button>
    </body>
</html>
    • 0