Remove From My Forums

[UWP][HTML] button navigation problems

Question
0

Sign in to vote
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