locked
win.js.ui.HtmlControl: 'element' is not defined.?

    Question

  • I used `WinJS.UI.HtmlControl object` for my app and I initialized this using `JavaScript` code as below. But It shows error that `element` is not defined. I just want to display 'page.html' when 'object' is called.

    My JavaScript code:

       
     var object = new WinJS.UI.HtmlControl(element, {uri: 'page.html'});



    Error:

        SCRIPT5009: Unhandled exception at line 61, column 9 in    ms-appx://app-package.app-name/js/data.js    0x800a1391 - JavaScript runtime error: 'element' is undefined    File: data.js, Line: 61, Column: 9

    Wednesday, August 21, 2013 6:17 AM

Answers

  • In that template, data.js gets loaded from default.html, and even though the other pages like split.html reference it (mostly for intellisense), it doesn't get reloaded. And because split.html isn't loaded until you navigate, the element in which you're creating the HtmlControl might not exist when data.js is executed. (It's possible that you're picking up the contentHost element in default.html, in which case you should use a different name for the element.)

    The right place to put page-specific code like this anyway is the ready method inside split.js. That method is called after the page has been loaded and initialized, and after WinJS.UI.processAll has finished, so you know that the page is fully loaded and all elements in the markup, including WinJS controls, are present.

    Friday, August 23, 2013 7:09 PM

All replies

  • This error is telling you that the variable named 'element' in your call is not defined anywhere. That argument needs to be set to whatever element in the DOM will host the HtmlControl. For example, if you have this in your markup:

    <div id="contentHost"></div>

    Then in your code you'd do this:
    var element = document.getElementById("contentHost");
    var object = new WinJS.UI.HtmlControl(element, {uri: 'page.html'});

    This element is required because the HtmlControl needs to know where in the DOM to load up page.html, otherwise nothing would ever show.

    Kraig

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

    Also see second edition preview


    Wednesday, August 21, 2013 4:12 PM
  • Thank you very much. I coded as per your instruction.

    But, the page.html is not displayed there. Instead, 

    [Object Object]

    is displayed. What to do now.

    Thursday, August 22, 2013 5:12 AM
  • Not sure without seeing more of the code. I tried all this using a new app with the Blank project template, put the contentHost div in default.html, added the two lines of code in default.js after the args.setPromise line, and made a page.html that just contained this:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            <h1>Page title</h1>
            <p>Page content</p>
        </body>
    </html>

    And all that worked as expected. I can only guess that your page.html doesn't contain valid markup or you're trying to use JavaScript within it to generate the contents and there's a problem with that.
    Thursday, August 22, 2013 5:38 PM
  • Yes. you're right. But I'm using Split App template. I have made this

    var element = document.getElementById("contentHost");
    var object = new WinJS.UI.HtmlControl(element, {uri: 'page.html'});

     in 'data.js' and therefore  in 'split.html' under <article> created the <div id="contentHost"> tag.This is what I made and [object Object] is what i got as output.


    - Mohamed Thaufeeq A

    Friday, August 23, 2013 10:23 AM
  • In that template, data.js gets loaded from default.html, and even though the other pages like split.html reference it (mostly for intellisense), it doesn't get reloaded. And because split.html isn't loaded until you navigate, the element in which you're creating the HtmlControl might not exist when data.js is executed. (It's possible that you're picking up the contentHost element in default.html, in which case you should use a different name for the element.)

    The right place to put page-specific code like this anyway is the ready method inside split.js. That method is called after the page has been loaded and initialized, and after WinJS.UI.processAll has finished, so you know that the page is fully loaded and all elements in the markup, including WinJS controls, are present.

    Friday, August 23, 2013 7:09 PM
  • Since am new, can you please tel me what should i do by explaining with the code .?

    - Mohamed Thaufeeq A


    Saturday, August 24, 2013 7:31 AM