Problem with WinJS.UI.Pages.render - Object doesn't support property or method 'appendChild'

Question

I have an issue trying to load a fragment inside a div control using some fairly simple code.

I have a div element declared used to house my html fragment (which will eventually hold more complex page logic) but for now it is some extremely simple markup.

I can get a reference to the control correctly via the = u.id('contentHost'); command below, but upon trying to render the contents of that fragment i get the following error :

Object doesn't support property or method 'appendChild'

I've looked at the debugger and found it is loading the fragment correctly by examining its properties, but it's unable to set it inside the div element.

Any ideas?

    WinJS.UI.Pages.define("/pages/reportDetail/reportDetail.html", {
        ready: function (element, options) {
            WinJS.UI.processAll().then(function (e) {

                var u = WinJS.Utilities;
                var myDiv = u.id('contentHost');
                WinJS.UI.Pages.render("/pages/DynamicReportControls/Main/main.html", myDiv, { data: 'data2share' });
            }).done();
        },

        updateLayout: function (element, viewState, lastViewState) {

        },

        unload: function () {

        }
    });

Answer 1

Hi Brid,

Hard to tell without all of your code.  But here is how to do it: http://msdn.microsoft.com/en-us/library/windows/apps/hh770117.aspx

Make sure the constructor is publically exposed and you are following these guidelines.  My guess is that 'contentHost' is not formatted correctly.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Turns out the .id() selector shortcut doesnt directly return a reference to a single entity.

var myDiv = u.id('contentHost')[0]; <-- this is the working way, with the [0] index added at the end. After doing this everything worked perfectly.