How to use jQuery with WinJS

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

&lt;!-- External references --&gt;
 &lt;script src=&quot; /js/jquery-1.8.0.min.js&quot;&gt;&lt;/script&gt;
Tagged with: ,
Posted in Windows 8
4 comments on “How to use jQuery with WinJS
  1. 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

  2. Philippe says:

    It doesn’t seems to work with NuGet packages. Still searching.

  3. seenu says:

    it’s not working

  4. seenu says:

    it is working

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>