www.webdeveloper.com
Results 1 to 9 of 9

Thread: populating Listbox

  1. #1
    Join Date
    May 2011
    Posts
    7

    Unhappy populating Listbox

    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.

    Can anyone suggest me for more effective way.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  3. #3
    Join Date
    May 2011
    Posts
    7

    Question

    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>'
    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?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  5. #5
    Join Date
    May 2011
    Posts
    7

    Unhappy

    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;
    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..

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    What is traderlists? Where is it defined?

  7. #7
    Join Date
    May 2011
    Posts
    7
    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

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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>

  9. #9
    Join Date
    May 2011
    Posts
    7

    resolved Thanks

    It works perfectly for me...

    Thanks a lot man.. You are a star

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles