Question

I am making jQuery UI dialogs open with jqGrids (local data at the moment) in them. That part works but when I try to call my grid building function and attach it to a dynamically made DIV, I only get the shell of the jqGrid with the table headings but no data. Any ideas? Here’s the parred down source:

        var dialog_count = 0;
        var default_grid = {
                datatype: "local", 
                height: 80, 
                rowNum: 10, 
                rowList: [10,20,30], 
                multiselect: true, 
                rowList:[10,20,30], 
                sortname: 'id', viewrecords: true, sortorder: "asc",
                footerrow: true,
                loadui: "block"
        };
        var randomNum = function(){
            return Math.floor(1000000 + Math.random() * 9000000);
        };
        var returnKeys = function(obj){
            var arr = [];
            for (var keys in obj[0]){
                arr.push(keys)
            }
            return arr;
        };
        var createGrid = function(gridInfo,div){
            var gridKeys = returnKeys(gridInfo);
            if (typeof(div) !== "object"){
                div = $('#'+div);
            }

            var details = $.extend({
                data: gridInfo,
                colModel: function(){
                    var arr = [];
                    var colnam = gridKeys;
                    $.each(colnam, function(index,value){
                        arr.push({name: value,index:value,width:80 })
                    });
                    return arr;
                }()
            },default_grid);
            var rand = randomNum();
            var pager = 'pager'+rand;
            var str = '<div id="'+pager+'"></div>';

            var grid = div.append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand); 
            var grid_args = $.extend({pager: '#'+pager},details);
            console.log(div)
            grid.jqGrid(grid_args);
        };

        $.fn.createDialog = function(opts,titl,page,tpl){
            var custom = {
                open: function(){ 
                    if(typeof(page) === "string"){
                        $(this).load(page);
                    }
                },
                title: titl
            }

            var veryCustom = $.extend(custom,opts);

            if(typeof(page) === "object"){
                var container = $("body"),
                divName = 'adiv'+dialog_count;
                tpl = (tpl == undefined) ? '' : tpl,
                dlg = container.append('<div id="'+divName
                        +'">'+tpl+'</div>').find('div#'+divName);
                dlg.dialog(veryCustom);

                if(page.length === 1){
                    createGrid(page[0],divName);
                }
            }else{
                $('<div/>').dialog(veryCustom);
            }
            dialog_count++;
        };
        var contentDialog = {
                width: 700,
                height: 200,
                position: [200,300]
        };
        var grid3template = function(obj){
            var str = $('<div class="meta"> \
                <div class="someClass"> \
                    yada yada \
                </div> \
                <div id="someDiv22">more text</div> \
                </div><!-- end class meta --> \
            '
            );
            createGrid(obj.grid3data, str.find("#someDiv22"));
            return str.html();
        };


   var grid1data = [ 
        {id:"<a href='#' class='grid1click'>63028</a>",division:"school",ctype:"building",tnum:'$100',cdate:"2011-02-09",cust:"Big HS",country:"USA",state:"VA"},
    ];
    jQuery("#grid1").jqGrid({ 
        data: grid1data, 
        datatype: "local", 
        height: 80, 
        rowNum: 10, 
        rowList: [10,20,30], 
        colModel:[ 
            {name:'id',index:'id', width:60, sorttype:"int"}, 
            {name:'division',index:'division', width:72},
            {name:'ctype',index:'ctype', width:100}, 
            {name:'tnum',index:'tnum',width:50},
            {name:'cdate',index:'cdate', width:94, sorttype:"date", formatter:"date"}, 
            {name:'cust',index:'cust', width:90},
            {name:'country',index:'country', width:30},
            {name:'state',index:'state', width:30}
        ],
        multiselect: true, 
        rowList:[10,20,30], 
        caption: "Grid 1" ,
        pager: '#plistGrid1', 
        sortname: 'id', viewrecords: true, sortorder: "asc",
        loadui: "block"
    });

    var grid2data = [ {id:"<a href='#' class='grid2click'>1</a>",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"} ];

    var grid3obj = {
        grid3data: [ {name:'<span class="provclick">1st Action Services</span>',ufoc:'AA2143',assoc:'Former Affiliate',city:'Austell',state:'GA',active:'Inactive'},{name:'281-Flooded, Inc.',ufoc:'351',assoc:'Member',city:'Houston',state:'TX',active:'Active'},{name:'Jim Davis Carpet Cleaning & Restoration Services, Inc',ufoc:'AA2177',assoc:'Former Affiliate',city:'Terre Haute',state:'IN',active:'Inactive'},{name:'A Fantabulous Restore Co.',ufoc:'999',assoc:'Member',city:'Disasterville',state:'IN',active:'Active'},{name:'Stellar Restoration Services, Inc',ufoc:'399',assoc:'Affiliate',city:'Bloomington',state:'IL',active:'Active'},{name:'We Do Trees Inc.',ufoc:'778',assoc:'National Partner',city:'Forest Grove',state:'WY',active:'Active'}]
    };

    $('.grid1click').click(function(e){
        e.preventDefault();
        $(this).createDialog(contentDialog,"Grid 2",[grid2data]);
    });

    $('.grid2click').live('click',function(e){
                e.preventDefault();
                $(this).createDialog(contentDialog,'Grid 3',[],grid3template(grid3obj));    
    });

and the HTML:

<table id="grid1"><tr><td>&nbsp;</td></tr></table>
<div id="plistGrid1"></div>

Answer 1

It seems to me that your problem is that you try to create jqGrid for the objects which are just jQuery detached object. In the function grid3template you create

<div id="someDiv22">more text</div>

but not place it on the page. Then inside of createGrid function you use

var grid = div.append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand);
...
grid.jqGrid(grid_args);

I suppose to solve the problem you should place the div#someDiv22 somewhere on the page (inside of the body) and only after that create the grid with grid.jqGrid(grid_args).