I have a select list which, when changed, pulls data via ajax and dynamically creates select lists. Then based on the data used to create the select lists (a type), I pull more data via ajax if i don't have it already and create the options for the select list and store them in a fragment. Then I append that fragment to the select list.
This is zippy in FF3 and Chrome but either doesn't append the options at all or takes a long time (minutes) to append the options in IE7.
Note: I am also using jQuery.
code from the success callback which creates the select lists:
blockDiv.empty();
var contentItemTypes = new Array();
selectLists = new Array();
for (var post in msg) {
if (post != undefined) {
var div = fragment.cloneNode(true); //deep copy
var nameDiv = $(div.firstChild);
nameDiv.text(msg[post].Name);
blockDiv[0].appendChild(div);
var allSelectLists = blockDiv.find('.editor-field select');
var selectList = $(allSelectLists[allSelectLists.length - 1]);
var blockId = msg[post].ID;
var elId = 'PageContentItem.' + blockId;
selectList.attr('id', elId);
selectList.attr('name', elId);
var contentItemTypeId = msg[post].ContentItemTypeId;
selectList.attr('cit', contentItemTypeId);
if (contentItems[contentItemTypeId] != null || contentItems[contentItemTypeId] != undefined) {
contentItems[contentItemTypeId] = null;
}
selectLists[post] = selectList;
}
}
var firstContentTypeId = selectLists[0].attr('cit');
getContentItems(firstContentTypeId, setContentItemsForList, 0);
code to get the items for the options in the select lists.
function getContentItems(contentTypeId, callback, callbackParam) {
if (contentItems[contentTypeId] != null || contentItems[contentTypeId] != undefined) {
callback(contentTypeId, callbackParam);
return;
}
contentItems[contentTypeId] = document.createDocumentFragment();
Q.ajax({
type: "POST",
url: "/CMS/ContentItem/ListByContentType/" + contentTypeId,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function(xhr, msg, e) {
var err = eval("(" + xhr.responseText + ")");
alert(err.ExceptionType + " ***** " + err.Message + " ***** " + err.StackTrace);
},
success: function(msg) {
var li;
for (var post in msg) {
if (post != undefined) {
li = $('<option value="' + msg[post].ID + '">' + msg[post].Description + '</option>');
contentItems[contentTypeId].appendChild(li[0]);
}
}
callback(contentTypeId, callbackParam);
}
});
}
function setContentItemsForList(contentTypeId, selectIndex) {
if (selectIndex < selectLists.length) {
var items = contentItems[contentTypeId].cloneNode(true);
selectLists[selectIndex].append($(items.childNodes));
selectIndex++;
if (selectIndex < selectLists.length) {
var nextContentTypeId = selectLists[selectIndex].attr('cit');
getContentItems(nextContentTypeId, setContentItemsForList, selectIndex);
}
}
}
