IE8 not displaying JSON data using JQUERY in a list

I'm developing an asynchronous database searching tool. It currently works with firefox and chrome, but has one enormous hiccup with internet explorer (version 8).

Students can enter their prospective MCAT and GPA scores and then jquery sorts out the schools where they place in the top 25% or the middle 50%. Basically, it's a neurotic premed student's dream (or nightmare).

The jquery cycles through the JSON data, displaying each item that matches the criteria in a <li> item. Again, it works great in ff and开发者_JAVA百科 chrome, but in internet explorer it refuses to display the list items. It does, however, display the proper count of items, which means that the json data is going through properly.

After searching through stackoverflow I saw some commentary (colorful, often!) on how IE refuses to allow placing elements in tables and some other innerhtml elements using jquery.

I'm wondering if this is the problem, and though I found a similar problem on this question I can't quite figure out how to adapt it for my project (I'm new to javascript).

Any help would be wonderful. The code can be found below.

-samuel

$.getJSON("schoolgrabber.php?jsoncallback=?", function(data){
        //loop through the items in the array
        for(var x=0; x < data.length; x++){
            if( MCAT >= data[x].TopPercentileMCAT && data[x].TopPercentileMCAT!=''){

            var li = $("<li>").appendTo("#schoollist");
            var school= data[x].School;
            //add the actual information into the li using a chain event
            //the event begins by appending an <a> tag, with the name of the school inside (text(data[x].School)
            //then it adds a unique id, which is the iteration number the counter is on above (x)
            //then it adds the url, and adds the school variable, which allows the schools to be clicked over to the results page
            //then it puts all of that inside li, as declared above (slightly backwards, but hey)
            $("<a>").text(data[x].School).attr("id",x).attr("href", "results.php?school=" + school).appendTo(li);
            $("#schoollist li").addClass("school");
            var quantity = $(".school").length;
            $('#schoolquantity').empty();
            $('#schoolquantity').append(quantity);
            }}
            });

Instead of using jQuery and chaining to build up your DOM, try instead to build out a string of the HTML you want rendered and add that completed string just the one time.

Not only might it fix your bug, but you'll also get better performance. What I'm doing is building up the list's full HTML and calculating the quantity. Then, when I'm completely finished building the HTML, I add it to the DOM. IMO the way I have below is also more readable. Note that I haven't tested this, but you should get the idea:

$.getJSON("schoolgrabber.php?jsoncallback=?", function(data){
        //loop through the items in the array

       var html = [];
       var parentElement = $("#schoollist");
       var quantity = 0;

       for(var x=0; x < data.length; x++){
            if( MCAT >= data[x].TopPercentileMCAT && data[x].TopPercentileMCAT!=''){
               var school= data[x].School;                
               html.push("<li class=\"school\">");
               html.push("    <a id=\"" + x + "\" href=\"results.php?school=" + school "\">");
               html.push(          data[x].School);
               html.push("    </a>");
               html.push("</li>");

               quantity++;
            }
        }

        parentElement.html(html.join(""));
        $('#schoolquantity').html(quantity);
});

Remember that everytime you alter the DOM the browser has to do a bunch of stuff to update the webpage. This is costly. You want to avoid adding/grabbing from the DOM as much as possible and instead "batch" your alterations (As a side note, if you want to alter the DOM alot without "batching", take a look at the jquery detach method).

Good luck, hope this works for you!