locked
[UWP][HTML] button navigation problems RRS feed

  • Question

  • Hi,

    I've been struggling with Javascript and VS2015 for a while now. Even decided to change over to C#. But, to give it one more try, hopefully someone can help me.

    I developed a Windows 8.1 app using Javascript in VS2013 and all works fine. To redesign it for Windows 10 I started a blank Javascript project in VS2015, and none of the functions I add works when I run the app. The only thing that works fine was the tutorial functions when I followed the tutorial. The most simple thing (a button) doesn't even work: and it doesn't matter if navigator.js is in or out the project, it doesn't work.

    Here's the code:

        <button class="win-button" id="navButton">Page 2</button>

    JS:

    			var buttonBrief = document.querySelector("#navButton")
    			buttonBrief.addEventListener("click", this.buttonBriefClick, false);
    
    
        function buttonBriefClick (eventInfo) {
            eventInfo.preventDefault();
            var link = eventInfo.target;
            WinJS.Navigation.navigate("pages/page2.html")
        }
    

    Hope someone can give me the right answer to make JS work again!

    Saturday, August 8, 2015 5:45 PM

Answers

  • Hello leontesh,

    I checked this and created a sample in which navigation works please see below code. I copied the navigator.js from win8.1 navigation template.

    default.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Navigation</title>
    
        <!-- WinJS references -->
        <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
        <script src="WinJS/js/base.js"></script>
        <script src="WinJS/js/ui.js"></script>
    
        <!-- Navigation references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/js/navigator.js"></script>
    </head>
    <body class="win-type-body">
        <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
    </body>
    </html>
    

    and the default.js

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
    	"use strict";
    
    	var app = WinJS.Application;
    	var activation = Windows.ApplicationModel.Activation;
    
    	app.onactivated = function (args) {
    		if (args.detail.kind === activation.ActivationKind.launch) {
    			if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    				// TODO: This application has been newly launched. Initialize your application here.
    			} else {
    				// TODO: This application was suspended and then terminated.
    				// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
    			}
    			args.setPromise(WinJS.UI.processAll().then(function () {
              
    
    			  WinJS.Navigation.navigate('/pages/home/home.html');
    
    			}));
    		}
    	};
    
    	app.oncheckpoint = function (args) {
    		// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
    		// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
    		// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    	};
    
    	app.start();
    })();
    


    Now on app activated I navigate to home page and in the home page I have button which will navigate to another page when button clicked.  

    home.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>homePage</title>
    
        <!-- WinJS references -->
        <link href="/WinJS/css/ui-dark.css" rel="stylesheet" />
        <script src="/WinJS/js/base.js"></script>
        <script src="/WinJS/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 data-win-control="WinJS.UI.BackButton" class="win-hub-section-header-interactive"></button>-->
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to Navigation81!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <p>Home Page</p>
                <input type="button" id="btnpage2"name="btnpage2" value="GO Page2 " />
            </section>
        </div>
    </body>
    </html>
    


    home.js

    (function () {
        "use strict";
    
        function btnclick() {
          WinJS.Navigation.navigate('/pages/page/page.html');
        }
    
        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.
              btnpage2.addEventListener('click', btnclick, false);
            }
        });
    })();
    

    Now this works fine.

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Wednesday, August 12, 2015 9:02 AM
    • Marked as answer by leontesh Saturday, August 15, 2015 10:12 AM
    Monday, August 10, 2015 9:11 AM

All replies

  • Hello leontesh,

    I checked this and created a sample in which navigation works please see below code. I copied the navigator.js from win8.1 navigation template.

    default.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Navigation</title>
    
        <!-- WinJS references -->
        <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
        <script src="WinJS/js/base.js"></script>
        <script src="WinJS/js/ui.js"></script>
    
        <!-- Navigation references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/js/navigator.js"></script>
    </head>
    <body class="win-type-body">
        <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
    </body>
    </html>
    

    and the default.js

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
    	"use strict";
    
    	var app = WinJS.Application;
    	var activation = Windows.ApplicationModel.Activation;
    
    	app.onactivated = function (args) {
    		if (args.detail.kind === activation.ActivationKind.launch) {
    			if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    				// TODO: This application has been newly launched. Initialize your application here.
    			} else {
    				// TODO: This application was suspended and then terminated.
    				// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
    			}
    			args.setPromise(WinJS.UI.processAll().then(function () {
              
    
    			  WinJS.Navigation.navigate('/pages/home/home.html');
    
    			}));
    		}
    	};
    
    	app.oncheckpoint = function (args) {
    		// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
    		// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
    		// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    	};
    
    	app.start();
    })();
    


    Now on app activated I navigate to home page and in the home page I have button which will navigate to another page when button clicked.  

    home.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>homePage</title>
    
        <!-- WinJS references -->
        <link href="/WinJS/css/ui-dark.css" rel="stylesheet" />
        <script src="/WinJS/js/base.js"></script>
        <script src="/WinJS/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 data-win-control="WinJS.UI.BackButton" class="win-hub-section-header-interactive"></button>-->
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to Navigation81!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <p>Home Page</p>
                <input type="button" id="btnpage2"name="btnpage2" value="GO Page2 " />
            </section>
        </div>
    </body>
    </html>
    


    home.js

    (function () {
        "use strict";
    
        function btnclick() {
          WinJS.Navigation.navigate('/pages/page/page.html');
        }
    
        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.
              btnpage2.addEventListener('click', btnclick, false);
            }
        });
    })();
    

    Now this works fine.

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Wednesday, August 12, 2015 9:02 AM
    • Marked as answer by leontesh Saturday, August 15, 2015 10:12 AM
    Monday, August 10, 2015 9:11 AM
  • wow, it works! Thanks! Do you know why my solution didn't work?
    Saturday, August 15, 2015 10:12 AM