ok here is the deal, the text takes approx 60ms to go through all the loops.

however, '$("div#content").html(content)' takes over 7 seconds to load, which isn't a problem except that the browser freezes up while this occurs, thus making my loading gif icon freeze up as well.

i would like to hear suggestions from the jQuery community on what the best approach to solving this problem is. loading the list elements individually using the $.html() function in the for loop is not an acceptable solution as it will take 30 seconds versus 7 seconds.

top.view.showIngredients = function (){

var contentOther = "<ul style='list-style: none; margin: 2px; padding-left: 2px; '> ";

var contentHeader = "";

var contentHeaderOther = "";

var content = "<ul style='list-style: none; margin: 2px; padding-left: 2px; '> ";

var ingredient = {};

contentHeader += "<b><span style=\"margin-left: 2px;\">Ingredient ID</span> \

<span style=\"margin-left: 5px;\">Desired ID</span> \

<span style=\"margin-left: 40px;\">Ingredient Name</span> \

<span style=\"margin-left: 100px;\"></span>";

//<span style=\"margin-left: 5px;\">Ingredient Type</span></b>";

contentHeaderOther += contentHeader;

ingredient = top.model.ingredients;

for (i in ingredient){

if (ingredient[i].flag_other_ingredient == "0") {

content += " <li><input size=\"5\" style=\"margin-left: 0px;\" value=\"" +ingredient[i].ingredient_id + "\"></input> \

<input size=\"5\" style=\"margin-left: 15px;\" value=\"" +ingredient[i].new_id +"\"></input> \

<input size=\"40\" style=\"margin-left: 15px;\" value=\"" +ingredient[i].name +"\"></input></li> ";

//<input size=\"2\" style=\"margin-left: 15px;\" value=\"" +ingredient[i].flag_other_ingredient +"\"></input></li>";

} else if (ingredient[i].flag_other_ingredient == "1"){

contentOther += "<li><input size=\"5\" style=\"margin-left: 0px;\" value=\"" + ingredient[i].ingredient_id + "\"></input> \

<input size=\"5\" style=\"margin-left: 15px;\" value=\"" +ingredient[i].new_id + "\"></input> \

<input size=\"40\" style=\"margin-left: 15px;\" value=\"" +ingredient[i].name + "\"></input></li> ";

//<input size=\"2\" style=\"margin-left: 15px;\" value=\"" +ingredient[i].flag_other_ingredient + "\"></input></li>";

}

}

//alert();

contentOther += "</ul>";

content += "</ul>";

$("div#content").html(content).ready(function(){

$("div#contentOther").html(contentOther);

});

$("div#contentHeader").html(contentHeader);

$("div#contentHeaderOther").html(contentHeaderOther);

}