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:

<script src="/js/jquery-2.0.0-pre.js"></script>

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:

function getCurrentPositionDone(position) {
    var coordinate = position.coordinate;
    var query = coordinate.latitude + "," + coordinate.longitude;

    // replace with your own wunderground api key 
    // from http://www.wunderground.com/weather/api/
    var apiKey = "--- insert api key ---";
    var url = "http://api.wunderground.com/api/" + apiKey + "/geolookup/forecast/q/" + query + ".json";
    $.ajax(url, {
        success: render,
        error: function () {
            // Handle error
        }
    });
}

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:

function render(result) {
    $("h2").text(result.location.city);

    var forecast = result.forecast.simpleforecast.forecastday;
    renderWeather(forecast);

    $("progress.win-ring").hide();
    $(".content").fadeIn("fast");
}

function renderWeather(forecast) {
    var condition = forecast[0];
    var conditionElement = $(".condition");
    var imageSrc = "/images/icons/" + condition.icon + ".svg";
    conditionElement.find("img").attr("src", imageSrc);
    conditionElement.find(".high span").text(condition.high.celsius);
    conditionElement.find(".low span").text(condition.low.celsius);
    conditionElement.find(".text").text(condition.conditions.toLowerCase());
    conditionElement.find(".wind span").text(condition.avewind.kph);

    var todayIndex = 0;
    $.each(forecast, function (index, item) {
        if (index === todayIndex) return;

        renderForecast($(".day-" + index), item);
    });
}

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.

Downloads

jQuery sample - jQuery.zip (109 downloads)

One thought on “Using jQuery in JavaScript apps

  1. Pingback: Reuse skills and frameworks in JavaScript apps

Leave a Reply