Answered by:
[UWP][HTML] button navigation problems

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