Scope problem in JS: Uncaught TypeError: Object #<an Object> has no method 'createDocumentFragment'

Question

I'm trying to make instrument to simplify work with complex grids of jqGrid, a function that could read schemes of grids, but looks like i lack JS skills for that )

function renderGridSystemRecursively(scheme, container){

// CHILDREN
    if ('children' in scheme && scheme.children.length > 0) {
        scheme.prm.gridPrm.subGrid = true
        scheme.prm.gridPrm.subGridRowExpanded = function (expandedRowContainer_id, parent_dataitem_id) {

            var hiddenAtStart = (scheme.children.length > 1) ? true : false
            for (var i in scheme.children) {
                var child = scheme.children[i]
                if ('scheme' in child) {

// NEXT LINE CAUSES ERROR 
// Uncaught TypeError: Object #<an Object> has no method 'createDocumentFragment'
                    var subcontainer = $('<div style="float: left;"/>',{id:expandedRowContainer_id+'_'+child.subId})
                    container.append(subcontainer)

                    child.scheme.hiddengrid = (child.scheme.hiddengrid == undefined) ? hiddenAtStart : child.scheme.hiddengrid

                    var self = $('#'+subcontainer.attr('id')+'_grid')
                    child.scheme.prm = child.scheme.prmInit(parent_dataitem_id, self)
                    child.scheme.prm.navMode = 'subgrid'
                    renderGridSystemRecursively(child.scheme, subcontainer)
                }
            }
        }
    }
//...

    renderGrid(scheme.prm, container, scheme.prm.navMode)
}

Function definition is located in separate file, and is in global scope. Function called outside of ready(), but error accures inside of subGridRowExpanded event handler, so it looks like that i've messed up with closures, can't figure out how exactly.

I don't use any other library except jquery.

Answer 1

I guess what you like to do ist this:

var subcontainer = $('<div style="float: left;"/>').attr({id:expandedRowContainer_id+'_'+child.subId});

createDocumentFragment() is a method of document.

$('<div style="float: left;"/>')

...will create a new DocumentFragment. If you provide the 2nd parameter, this parameter will be taken as the context(should be a document, what it's not actually). That causes the error.

Answer 2

Your syntax is a little off, you can't have elements with inline properties and a properties (or events) object passed in when using $(html, props). So this:

 $('<div style="float: left;"/>',{id:expandedRowContainer_id+'_'+child.subId})

Needs to be something like this:

 $('<div />',{id:expandedRowContainer_id+'_'+child.subId, css:{float:'left'}})