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

    Question

  • 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

     WinJS.Navigation.navigate("/pages/container/container.html");

    container.html has a page fragment

         <div id="allMonthlyCategoriesControl"
                     data-win-control="WinJS.UI.HtmlControl" 
                     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";
                element.appendChild(p);
                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

Answers

All replies

  • Use the element passed into the ready function.  This will be the object that is being added (your pagecontrol.html).

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, September 04, 2012 6:31 PM
    Moderator
  • Thanks. Would be nice if the documentation was a little clearer on the matter. I'll go add a comment.
    Wednesday, September 05, 2012 8:12 AM