none
JavaScript is very slow loading a select list on IE7

    Question

  • I am loading a list of 4200 values in a select list dynamically from database.
    Page load is instant in firefox and crome but IE its very slow. Browser hangs for couple of seconds.

    I execute the following script code on load:

    "
      var currComponents = Components[0].split(",");
      var len = currComponents.length;
    //    alert("onload");
      var abc = document.getElementById("IDcompList");
       
      abc.innerHTML = "";

        for (var i=0; i<len;i++){
            var opt = document.createElement("option");
            opt.value = currComponents[i];
            opt.innerText = currComponents[i];
            abc.appendChild(opt);
        }
    "


    Please suggest how can i improve the performance in IE. (I cann't use autocomplete/ajax due to business requirement)

    Thanks in advance.
    Monday, March 01, 2010 3:16 PM

All replies

  • Hi,

    Are you using an Active Serverpage environment? jsp, asp, aspx, php

    I don't know why you would be using that design pattern if you are.

    Please provide

    Your target IE version and Doctype declaration.

    A link to a publicly accessible web page that we can have a look at or some sample data.(what does it contain? web addresses? Unicode text?)

    Have you validated your page with the FX Tidy extension and corrected all warnings? Not just errors, you have to correct Warnings also for IE.

    Regards.


    Rob^_^
    Tuesday, March 02, 2010 7:49 PM
  • Hi Rob,

    I am using JSP-servlet env.
    Target IE version is 7, same thing happens in the IE 6 also and doctype is loose.dtd.

    I am working in an intranet so page is not available publicly. Sample data contains text(length 5-15 chars) and i get this data from database in form of javascript array by setting a attribute and read it in jsp .

    I also tested it by keeping an alert and found that creating the select list by above code slow down the page load.

    I have not validated the page with "FX Tidy ext."...btw i am a new bee here...can you tell me how do i do that?

    Regards,
    Jangir
    Wednesday, March 03, 2010 11:48 AM
  • Hi,

    jsp hey? Calypso IDE?

    You will be using xhtml dtd's and probably document.write's to populate the Option's list under the <select> tag.

    The best tool for this is the Firefox extension Tidy HTML... so you will need the latest FX version and the Tidy HTML extension - download (with FX) from -

    <cite>https://addons.mozilla.org/firefox/addon/249</cite>

    The vendors homepage is http://users.skynet.be/mgueury/mozilla/

    where you'll find instructions for using it.

    Typically you will have errors like / not allowed here in your document.write statements appearing in the Tidy's errors and warnings list.... warnings must be corrected if your markup and scripts are going to work in MSIE browsers... they are classed as warnings by Tidy because FX can self correct them (not a secure thing to do), but MSIE browsers (for security reasons) will not make the assumptions that the code needs to be corrected.

    eg.

    <script type="text/javascript">

    document.write('<option value="somevalue">some text</option>');

    </script>

    where tidy will point to the / in the closing option tag.

    In the Tidy validator there is a button to "Clean up HTML", press it and it will correct the issue and show you the correct syntax for writing strings with document.write... (BTW... Mozilla browsers ignore document.write's when the dtd is xhtml)...

    strings in javascript are C strings... there are special characters that need to be 'escaped' for them to work properly when injected into html code.

    see: http://www.w3schools.com/jS/js_special_characters.asp

    so... in the above example...

    document.write('<option value=\"somevalue\">some text<\/option>');

    would be the correct way of doing it...

    Now you are probably also using values from a database to populate the value attribute... You have to clean this data if it contains single or double quotes or any of the special characters that are listed in the w3chools reference above.

    Usually you do this once with a DBA script rather than 'sanitizing' it with server side code or client side javascript escape's.

    Regards.


    Rob^_^
    Wednesday, September 01, 2010 1:45 AM