How can i use WinJS.xhr with live tile.

Question

I develop an application with a live tile.

Why my live tile not update automatically, it's show only first (i=0) and last (i=4) then stop at last tile.

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);
getTileData();

function getTileData() {
    WinJS.xhr({
        url: "http://myurl",
        responseType: "json"
    }).then(function (xhr) {
        var json = JSON.parse(xhr.responseText);
        var tileArr = [];

        for (var i = 0; i < 5; i++) {
            var item = json[i];
            tileArr.push({
                "title": item.title,
                "img": item.thumb_url
            });
            tileTitle = tileArr[i].title;
            largeTileImage = tileArr[i].img;
            sendTile(tileTitle, largeTileImage);
        }
    });
}
function sendTile(tileTitle, largeTileImage) {
    var notifications = Windows.UI.Notifications;

    var template = notifications.TileTemplateType.tileWideImageAndText01;
    var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

    var tileTextAttributes = tileXml.getElementsByTagName("text");
    tileTextAttributes[0].appendChild(tileXml.createTextNode(tileTitle)); // Text

    var tileImageAttributes = tileXml.getElementsByTagName("image");
    tileImageAttributes[0].setAttribute("src", largeTileImage); // Large image
    tileImageAttributes[0].setAttribute("alt", "red graphic");

    var squareTemplate = notifications.TileTemplateType.tileSquareText04; 
    var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);

    var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");
    squareTileTextAttributes[0].appendChild(squareTileXml.createTextNode(tileTitle)); // Text

    var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
    tileXml.getElementsByTagName("visual").item(0).appendChild(node);

    var tileNotification = new notifications.TileNotification(tileXml);

    tileNotification.tag = "Tilebox";
    notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

}

Can i use WinJS.xhr to send the data to live tile?

and what should i do?

thank you so much.

Answer 1

You probably haven't enabled the notification queue by calling TileUpdater.enableNotificationQueue(true).

To clarify part of your question, you're using WinJS.xhr only to obtain information from which you build and issue tile updates; you're not using the API to issue the tile update itself.

This raises the question though: why are you making an HTTP requests yourself for this information? It would work much better to generate the tile updates on the server directly, allowing you to use periodic updates to keep the tiles fresh even when the app is suspended or not running at all. In your solution the tiles will only be updated if the app is running.

See Quickstart: setting up periodic notifications for details on how to do this. You can have five URIs on the server (or one URI with ? parameters) to return tile updates for each slot in the notification queue.

Kraig

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

Also see second edition preview