locked
Detecting when a page controll is no longer visible on screen

    Question

  • Hi,

    I am writing a Windows Store application using HTML5 and Javascript.  Our application needs to poll for refreshes on the server and when new data is availalbe the views need to refresh.

    When I detect a completed refresh I raise an event as follows:

    WinJS.Application.queueEvent({ type: "refreshFinished" })

    In the ready function of my page control I subscribe to this event:

    WinJS.Application.addEventListener("refreshFinished", function (e) { refreshView(element); });

    The problem comes in when a page control isn't visible on the screen I get null reference exceptions when I try locate DOM elements:

    element.querySelector("#listTitle", element);

    Ideally I would like to subscribe to events that get raised when a control becomes visible and when it is hidden and remove the event listener.  Alternatively I would like to be able to detect if a control is currently visible without having to do a null check every time I try use querySelector.  What is the reccomended way to do this?

    Thanks,

    Stephen


    • Edited by Stephen.Young Tuesday, October 2, 2012 8:07 AM formatting
    Tuesday, October 2, 2012 8:06 AM

Answers

  • Maybe I'm not interpreting the question properly, but if you want to know when the page control is going away so you can unsuscribe, release resources, etc., you can use the unload() method.  If other components need to know about a page coming and going, can you publish those events from start() and unload()?

    • Edited by nerff Friday, October 5, 2012 4:40 PM
    • Marked as answer by Song Tian Friday, November 9, 2012 6:38 AM
    Friday, October 5, 2012 4:39 PM