Creating controls at runtime in WinJS

Question

Hi,

I want to populate a drop down list box at run time and am using a similar technique to this http://social.msdn.microsoft.com/Forums/windowsapps/en-US/91221b03-cf8d-4481-9849-c28c3f203988/how-to-fetch-data-from-web-service-in-windows-store-apps-using-javascript?forum=winappswithhtml5

The web service returns data correctly but the last line of code

ready: function (element, options) {
//some code you may already have
 WinJS.xhr({url: "webservice_url" }).done(function (datas) {
var data = JSON.parse(datas.responseText);
var innerhtml='';
for (i = 0; i < data.length; i++) {
innerhtml+='<option>'+data[i].AreaName+'</option>';
}
element.querySelector('#CbxArea').innerHTML = innerhtml;

returns an error. What exactly is wrong and what should be used so that the control with data is seen on the page. This example assumes that you have the control designed on the page. How would we draw the controls and position them on a blank page.

Thanks in advance.

Rajesh.

Answer 1

Does that line of code work for any other information other than the innerhtml that you're trying to assign?

---

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.

Answer 2

Hi,

this line of code did the trick

document.getElementById("CbxArea").innerHTML = innerhtml;

But I am curious what does this line element.querySelector('#CbxArea').innerHTML = innerhtml; mean and how does it work.

Answer 3

https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelector?redirectlocale=en-US&redirectslug=DOM%2FElement.querySelector

---

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.