/    Sign up×
Community /Pin to ProfileBookmark

populating Listbox

Copy linkTweet thisAlerts:
May 04.2011

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));
}[/CODE]

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.

Can anyone suggest me for more effective way.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorMay 04.2011 — 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.
Copy linkTweet thisAlerts:
@rkharikrishnanauthorMay 04.2011 — Thanks Kor for the reply

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
strout='<select id="ls1"><option value="1">text1</option><option value="2">text2</option></select>'[/QUOTE]

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.

any suggessions on this approach?
Copy linkTweet thisAlerts:
@KorMay 04.2011 — But I understand that what you receive from the XML are the OPTION elements, right? Not the entire SELECT element. If so, use [B]innerHTML[/B] to insert the OPTION elements into the already HTML written SELECT elements.
Copy linkTweet thisAlerts:
@rkharikrishnanauthorMay 04.2011 — I was trying with innerHTML and i got strange issue

[CODE]ouputstring = "<option value='22'>123</option><option value='122'>1223</option>";
traderlists.innerHTML = ouputstring;[/CODE]

if i give like this and check the innerHTML once again it will give me innerHTML as "123</option><option value='122'>1223</option>"

very strange

I am not getting why this is happening..
Copy linkTweet thisAlerts:
@KorMay 04.2011 — What is [B]traderlists[/B]? Where is it defined?
Copy linkTweet thisAlerts:
@rkharikrishnanauthorMay 04.2011 — tradelists is the listbox

var tradelists=document.getElementById("lstTrades");

I was debugging this. Check the value of tradelists.innerHTML before and after assigning and got this abve mentioned issue.

I also tried assigning using document.getElementById("lstTrades").innerHTML="<option value='2'>1</option>"

still same issue ?
Copy linkTweet thisAlerts:
@KorMay 04.2011 — 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:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
onload=function(){
var tradelists=document.getElementById("lstTrades");
var div=tradelists.parentNode;
var inHTML=div.innerHTML.split('&lt;/select&gt;')[0];
div.innerHTML=inHTML+'&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;'+'&lt;/select&gt;'
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action=""&gt;
&lt;div&gt;
&lt;select id="lstTrades"&gt;&lt;/select&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@rkharikrishnanauthorMay 05.2011 — It works perfectly for me...?

Thanks a lot man.. [COLOR="Blue"][SIZE="5"]You are a star

[/SIZE][/COLOR]?
×

Success!

Help @rkharikrishnan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...