I am trying to populate a listbox using ajax request.
Everything works fine for me. I usded below javsscript code for the same.
Code:
var xmlDoc = xmlhttp.responseXML;
for (var i = 0; i < xmlDoc.getElementsByTagName("id").length; i++) {
traderlists.add(new Option(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue, xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue));
}
But the issue i am facing is there will be sometime around 10,000 nodes returing from ajax request and its taking too much time to populate the listbox becuase of the for loop.
Hm. If an XML has about 10,000 nodes, that means the data storing process was not well thought from the very beginning. Simply a such huge XML file is hard to be handle by default. You should have created several slender XML files instead a single fat one.
JavaScript is not a fast language, as it is an interpreted language, not a complied one (even some modern browsers do compile some of the JavaScript processes). I am afraid that there is not much you can do about.
I have tried to use an xsl and transform the xml to a select html code. This works fast.
But if i set the outerhtml of the select as this new xml, this is no longer identified by the document object.
Is there any way if we have the html text of a control, we can create the control in DOM?
eg: after applying xsl i will get a string liks as below
i tried to put document.getElementById("lst1").outerHTML=strout
this is showing the listbox with new content, but if i try to access a option in this using javascript it will fail. This is no longer identified as DOM object.
But I understand that what you receive from the XML are the OPTION elements, right? Not the entire SELECT element. If so, use innerHTML to insert the OPTION elements into the already HTML written SELECT elements.
Oh, I remember now that IE has a bug related with the using of innerHTML in some cases (table, table elements, select, etc) in which cases innerHTML works like a readonly property. The workaround is to nest each list box inside a div, and use this kind of approach:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
onload=function(){
var tradelists=document.getElementById("lstTrades");
var div=tradelists.parentNode;
var inHTML=div.innerHTML.split('</select>')[0];
div.innerHTML=inHTML+'<option value="1">1</option><option value="2">2</option>'+'</select>'
}
</script>
</head>
<body>
<form action="">
<div>
<select id="lstTrades"></select>
</div>
</form>
</body>
</html>
populating Listbox
Reply With Quote
Thanks
Bookmarks