var userName = document.getElementById("nameInput").value;
My natural question was can it be done in more fancy way ? How about using jQuery instead ? Why not so I’ve included jQuery library in my default.html page just like that :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HelloWorld</title> <!-- WinJS references --> <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> <!-- External references --> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <!-- HelloWorld references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html>
and then replace getElementById() with jQuery syntax :
userName = $("#nameInput").val();
Unfortunately it results with an error:
It takes me a while to understand that jQuery library can’t be load. In fact none of external references can. Windows 8 Metro application is not a web application so trying to use non-project references will fail. That’s certainly hard to understand at first especially when Windows 8 application is seen from web developer perspective.
To make jQuery work with WinJS the source code of the library needs to be include in the project by adding jquery-1.8.0.min.js file as an existing item.
And then in the <head> section of the default.js referenced as
<!-- External references --> <script src=" /js/jquery-1.8.0.min.js"></script>