locked
winControl property is undefined.

    Question

  • Hi Experts!

    I have a problem on the following JavaScript code.

    document.getElementById("id_test").innerHTML += "<div class=\"class_test test\" data-win-control=\"WinJS.UI.ListView\"></div>";
    
    
    var control = document.querySelector(".test").winControl;
    <div id="id_test" class="class_test" >
    </div>

    I want to add WinJS.UI.ListView on the id_test tag using JavaScript (not declared on HTML).

    But on the above code, control object must be "undefined" (can not access data-win-control).

    To access data-win-control, I have to define <div></div> on the HTML?

    (or Is there any way to use data-win-control with innerHTML property or insertAdjacentHTML() function?)

    Thursday, November 20, 2014 9:29 AM

Answers

  • I don't think this will work since the HTML isn't being parsed at runtime. You should generate the listview in code and dynamically add it to the DOM.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, November 20, 2014 7:16 PM
    Moderator
  • Hi,

    You should be able to do what you want via adding a call to WinJS.UI.processAll() to your code:

    WinJS.UI.processAll(document.getElementById("id_test"))
       .then(function() {
          var control = document.querySelector(".test").winControl;
    
         // here we have control available
       });

    Note that you can also create a ListView fully in JavaScript as follows (see http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx):

    var object = new WinJS.UI.ListView(parentObject, options);


    Thursday, November 27, 2014 7:17 PM

All replies

  • I don't think this will work since the HTML isn't being parsed at runtime. You should generate the listview in code and dynamically add it to the DOM.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, November 20, 2014 7:16 PM
    Moderator
  • Hi,

    You should be able to do what you want via adding a call to WinJS.UI.processAll() to your code:

    WinJS.UI.processAll(document.getElementById("id_test"))
       .then(function() {
          var control = document.querySelector(".test").winControl;
    
         // here we have control available
       });

    Note that you can also create a ListView fully in JavaScript as follows (see http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx):

    var object = new WinJS.UI.ListView(parentObject, options);


    Thursday, November 27, 2014 7:17 PM