Building my first Windows 8 Store application with Java Script project template results with unexpected discovery. I become curious how new WinJS works with Windows 8 application presentation layout so I started by reading couple MSDN articles about it. I was truly surprised seeing so classic JavaScript implementation in included code examples :
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:
0x800a1391 – JavaScript runtime error: ‘$’ is undefined.
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.
Solution
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>
R&D Department
Thanks for this post. It pointed me to the right direction.
So what I did is right click on the js Folder and klick: Add->New Item. Then I chose JavaScript. And so it created an empty file called script.js, This one I renamed to jquery.js and copy pasted the source of a recent jquery-min version.
I didn’t realize that by copying the file directly into the Folder on the file System does not work.
still learning…
Regards Chris
It doesn’t seems to work with NuGet packages. Still searching.
it’s not working
it is working