Using jQuery in JavaScript apps

One of the major pros in using WinJS for Windows 8 apps is the ability to leverage your existing web development skills to create native Windows 8 apps. Using libraries you’re familiar and comfortable with, like the most popular JavaScript library: jQuery is great to give yourself a boost in developing new apps. In this post we’ll take advantage of the recent additions made to jQuery and start using jQuery in JavaScript apps.

This post continues the series in collaboration with Arian from Zilverstede, who have several JavaScript apps in the Windows Store. Unlike the first and previous post in this series, this post will highlight some of the key things in the sample solution rather than building it up from scratch..

Referencing jQuery 2.0

While writing this post, jQuery 2.0 is currently in Beta 2. You can grab the latest (unstable) build from jQuery’s download site or grab the (less unstable) beta 2 build from jQuery’s CDN. As we’re using the blank template, we only need a reference to the jQuery JavaScript in the default.html page:

In the complete solution, which you can download at the bottom of the post, we have some HTML and CSS in place to display the data we’re about to retrieve. To keep things simple, we’ll move on to the logic of the app and you can look at the HTML/CSS in the complete solution.

Using jQuery to retrieve the weather

To do the API call needed to retrieve the weather, we’ll use jQuery.ajax(), which allows for concise syntax to do an AJAX call:

We’re using the coordinates we retrieved from the Geolocation API to build the REST URL of Weather Underground’s API, after which we simply call jQuery.ajax() with a callback function of render. Make sure you actually replace — insert api key — with an actual API key from Weather Underground in the complete solution. The actual render function looks like this:

We use jQuery selectors here to quickly find elements on the page and set its attributes (image source, span text, etc.).

Additional reading

This post covers the bare basics of using jQuery in your Windows 8 JavaScript app, which should unleash your inner web developer to go nuts with it. For some additional information, please read Jonathan Sampson and Ralph Whitbeck’s blog article on Building Windows Store Applications With jQuery 2.0, which provides some good insights in the security considerations when you start using jQuery in JavaScript apps.


jQuery sample (451 downloads)
Pin It

One thought on “Using jQuery in JavaScript apps

  1. Pingback: Reuse skills and frameworks in JavaScript apps

Leave a Reply

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