Windows Dev Center

DOM elements not visible on WinJS.UI.Pages.define ready event


  • Hi All

    I've got a problem seeing available DOM elements in a project I'm working on. I cannot see any DOM elements when the ready event fires for a pagecontrol I'm loading.

    The problems seems to be related to a login page that I have, because when I replicate this code without the login it does find DOM elements. Basically I have a login page which on successful login executes


    container.html has a page fragment

         <div id="allMonthlyCategoriesControl"
                     data-win-options="{uri: '/pages/monthlyTrackingView/pagecontrol.html' }"></div>

    when pagecontrol.js executes I try and get some code to execute and add stuff to the DOM but the div I've trying to manipulate is null even though I do have that div with id 'canYouSeeMe'. Interstingly when I use the DOM inspector to check out the code it's still showing me the HTML code for the login page. So as far as I can understand it the ready event should only fire once the page has been added to the DOM so not really sure why it's firing before this is the case. Could it be that I need to not use WinJS.Navigation.navigate and pagecontrols in the same project?

     var ui = WinJS.UI;
        ui.Pages.define("/pages/monthlyTrackingView/pagecontrol.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                var p = document.createElement("p");
                p.textContent = "This control was created";
                WinJS.log && WinJS.log("Control creation complete", "sample", "status");
                var wellCanYou = document.getElementById('canYouSeeMe');
                console.log('wellCanYou' + wellCanYou);

    Tuesday, September 04, 2012 3:08 PM


All replies