DocumentFragment not appending in IE

Question

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();

                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); 
            }
        }
    }

Answer 1

Hey, did you figure this out yet? If not, I think it might help to take some of the key functionality, create a simpler example/test case out of it, and test things that way. I'm also having some issues with losing my dom element events after appending them a few times in a row in IE.