<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
	<title>jQuery Grid Plugin - jqGrid - Topic: Dynamic jqGrid not displaying data- why?</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/dynamic-jqgrid-not-displaying-data-why</link>
	<description><![CDATA[Grid plugin]]></description>
	<generator>Simple:Press Version 5.7.5.3</generator>
	<atom:link href="http://www.trirand.com/blog/?page_id=393/help/dynamic-jqgrid-not-displaying-data-why/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>ryurage on Dynamic jqGrid not displaying data- why?</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/dynamic-jqgrid-not-displaying-data-why#p23639</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/dynamic-jqgrid-not-displaying-data-why#p23639</guid>
        	        	<description><![CDATA[<p>I&#39;ve made jqGrids using local data at the moment and jquery UI dialogs.&#160; Links within the data open new dialogs with jqGrids within them.&#160; This works fine until I make a grid attach to some dynamically created code.&#160; The data and the pager disappears.&#160; If you have an environment with jquery UI and of course the jqgrid code, you can see what I&#39;m talking about.</p>
</p>
<p>HTML:</p>
<pre class="default prettyprint"><p><input type='button' class='sfcodeselect' name='sfselectit9255' value='Select Code' data-codeid='sfcode9255' /></p><div class='sfcode' id='sfcode9255'><p><input type='button' class='sfcodeselect' name='sfselectit3714' value='Select Code' data-codeid='sfcode3714' /></p><div class='sfcode' id='sfcode3714'>&#60;table id=&#34;grid1&#34;&#62;&#60;tr&#62;&#60;td&#62;&#38;nbsp;&#60;/td&#62;&#60;/tr&#62;&#60;/table&#62;<br />&#60;div id=&#34;plistGrid1&#34;&#62;&#60;/div&#62;</div><br /></div></pre>
<p>JS:</p>
<pre class="default prettyprint"><p><input type='button' class='sfcodeselect' name='sfselectit197' value='Select Code' data-codeid='sfcode197' /></p><div class='sfcode' id='sfcode197'><p><input type='button' class='sfcodeselect' name='sfselectit1000' value='Select Code' data-codeid='sfcode1000' /></p><div class='sfcode' id='sfcode1000'>&#160; &#160; &#160; &#160; var dialog_count = 0;<br />&#160; &#160; &#160; &#160; var default_grid = {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; datatype: &#34;local&#34;, <br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; height: 80, <br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; rowNum: 10, <br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; rowList: [10,20,30], <br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; multiselect: true, <br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; rowList:[10,20,30], <br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; sortname: &#39;id&#39;, viewrecords: true, sortorder: &#34;asc&#34;,<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; footerrow: true,<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; loadui: &#34;block&#34;<br />&#160; &#160; &#160; &#160; };<br />&#160; &#160; &#160; &#160; var randomNum = function(){<br />&#160; &#160; &#160; &#160; &#160; &#160; return Math.floor(1000000 + Math.random() * 9000000);<br />&#160; &#160; &#160; &#160; };<br />&#160; &#160; &#160; &#160; var returnKeys = function(obj){<br />&#160; &#160; &#160; &#160; &#160; &#160; var arr = [];<br />&#160; &#160; &#160; &#160; &#160; &#160; for (var keys in obj[0]){<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; arr.push(keys)<br />&#160; &#160; &#160; &#160; &#160; &#160; }<br />&#160; &#160; &#160; &#160; &#160; &#160; return arr;<br />&#160; &#160; &#160; &#160; };<br />&#160; &#160; &#160; &#160; var createGrid = function(gridInfo,div){<br />&#160; &#160; &#160; &#160; &#160; &#160; var gridKeys = returnKeys(gridInfo);<br />&#160; &#160; &#160; &#160; &#160; &#160; if (typeof(div) !== &#34;object&#34;){<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; div = $(&#39;#&#39;+div);<br />&#160; &#160; &#160; &#160; &#160; &#160; }<br /><br />&#160; &#160; &#160; &#160; &#160; &#160; var details = $.extend({<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; data: gridInfo,<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; colModel: function(){<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; var arr = [];<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; var colnam = gridKeys;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; $.each(colnam, function(index,value){<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; arr.push({name: value,index:value,width:80 })<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; });<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; return arr;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; }()<br />&#160; &#160; &#160; &#160; &#160; &#160; },default_grid);<br />&#160; &#160; &#160; &#160; &#160; &#160; var rand = randomNum();<br />&#160; &#160; &#160; &#160; &#160; &#160; var pager = &#39;pager&#39;+rand;<br />&#160; &#160; &#160; &#160; &#160; &#160; var str = &#39;&#60;div id=&#34;&#39;+pager+&#39;&#34;&#62;&#60;/div&#62;&#39;;<br /><br />&#160; &#160; &#160; &#160; &#160; &#160; var grid = div.append(&#39;&#60;table id=&#34;aGrid&#39;+rand+&#39;&#34;&#62;&#60;/table&#62;&#39;+str).find(&#39;#aGrid&#39;+rand); <br />&#160; &#160; &#160; &#160; &#160; &#160; var grid_args = $.extend({pager: &#39;#&#39;+pager},details);<br />&#160; &#160; &#160; &#160; &#160; &#160; console.log(div)<br />&#160; &#160; &#160; &#160; &#160; &#160; grid.jqGrid(grid_args);<br />&#160; &#160; &#160; &#160; };<br /><br />&#160; &#160; &#160; &#160; $.fn.createDialog = function(opts,titl,page,tpl){<br />&#160; &#160; &#160; &#160; &#160; &#160; var custom = {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; open: function(){ <br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; if(typeof(page) === &#34;string&#34;){<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; $(this).load(page);<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; }<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; },<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; title: titl<br />&#160; &#160; &#160; &#160; &#160; &#160; }<br /><br />&#160; &#160; &#160; &#160; &#160; &#160; var veryCustom = $.extend(custom,opts);<br /><br />&#160; &#160; &#160; &#160; &#160; &#160; if(typeof(page) === &#34;object&#34;){<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; var container = $(&#34;body&#34;),<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; divName = &#39;adiv&#39;+dialog_count;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; tpl = (tpl == undefined) ? &#39;&#39; : tpl,<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; dlg = container.append(&#39;&#60;div id=&#34;&#39;+divName<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; +&#39;&#34;&#62;&#39;+tpl+&#39;&#60;/div&#62;&#39;).find(&#39;div#&#39;+divName);<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; dlg.dialog(veryCustom);<br /><br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; if(page.length === 1){<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; createGrid(page[0],divName);<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; }<br />&#160; &#160; &#160; &#160; &#160; &#160; }else{<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; $(&#39;&#60;div/&#62;&#39;).dialog(veryCustom);<br />&#160; &#160; &#160; &#160; &#160; &#160; }<br />&#160; &#160; &#160; &#160; &#160; &#160; dialog_count++;<br />&#160; &#160; &#160; &#160; };<br />&#160; &#160; &#160; &#160; var contentDialog = {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; width: 700,<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; height: 200,<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; position: [200,300]<br />&#160; &#160; &#160; &#160; };<br />&#160; &#160; &#160; &#160; var grid3template = function(obj){<br />&#160; &#160; &#160; &#160; &#160; &#160; var str = $(&#39;&#60;div class=&#34;meta&#34;&#62; \<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#60;div class=&#34;someClass&#34;&#62; \<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; yada yada \<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#60;/div&#62; \<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#60;div id=&#34;someDiv22&#34;&#62;more text&#60;/div&#62; \<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#60;/div&#62;&#60;!-- end class meta --&#62; \<br />&#160; &#160; &#160; &#160; &#160; &#160; &#39;<br />&#160; &#160; &#160; &#160; &#160; &#160; );<br />&#160; &#160; &#160; &#160; &#160; &#160; createGrid(obj.grid3data, str.find(&#34;#someDiv22&#34;));<br />&#160; &#160; &#160; &#160; &#160; &#160; return str.html();<br />&#160; &#160; &#160; &#160; };<br /><br /><br />&#160; &#160;var grid1data = [ <br />&#160; &#160; &#160; &#160; {id:&#34;&#60;a href=&#39;#&#39; class=&#39;grid1click&#39;&#62;63028&#60;/a&#62;&#34;,division:&#34;school&#34;,ctype:&#34;building&#34;,tnum:&#39;$100&#39;,cdate:&#34;2011-02-09&#34;,cust:&#34;Big HS&#34;,country:&#34;USA&#34;,state:&#34;VA&#34;},<br />&#160; &#160; ];<br />&#160; &#160; jQuery(&#34;#grid1&#34;).jqGrid({ <br />&#160; &#160; &#160; &#160; data: grid1data, <br />&#160; &#160; &#160; &#160; datatype: &#34;local&#34;, <br />&#160; &#160; &#160; &#160; height: 80, <br />&#160; &#160; &#160; &#160; rowNum: 10, <br />&#160; &#160; &#160; &#160; rowList: [10,20,30], <br />&#160; &#160; &#160; &#160; colModel:[ <br />&#160; &#160; &#160; &#160; &#160; &#160; {name:&#39;id&#39;,index:&#39;id&#39;, width:60, sorttype:&#34;int&#34;}, <br />&#160; &#160; &#160; &#160; &#160; &#160; {name:&#39;division&#39;,index:&#39;division&#39;, width:72},<br />&#160; &#160; &#160; &#160; &#160; &#160; {name:&#39;ctype&#39;,index:&#39;ctype&#39;, width:100}, <br />&#160; &#160; &#160; &#160; &#160; &#160; {name:&#39;tnum&#39;,index:&#39;tnum&#39;,width:50},<br />&#160; &#160; &#160; &#160; &#160; &#160; {name:&#39;cdate&#39;,index:&#39;cdate&#39;, width:94, sorttype:&#34;date&#34;, formatter:&#34;date&#34;}, <br />&#160; &#160; &#160; &#160; &#160; &#160; {name:&#39;cust&#39;,index:&#39;cust&#39;, width:90},<br />&#160; &#160; &#160; &#160; &#160; &#160; {name:&#39;country&#39;,index:&#39;country&#39;, width:30},<br />&#160; &#160; &#160; &#160; &#160; &#160; {name:&#39;state&#39;,index:&#39;state&#39;, width:30}<br />&#160; &#160; &#160; &#160; ],<br />&#160; &#160; &#160; &#160; multiselect: true, <br />&#160; &#160; &#160; &#160; rowList:[10,20,30], <br />&#160; &#160; &#160; &#160; caption: &#34;Grid 1&#34; ,<br />&#160; &#160; &#160; &#160; pager: &#39;#plistGrid1&#39;, <br />&#160; &#160; &#160; &#160; sortname: &#39;id&#39;, viewrecords: true, sortorder: &#34;asc&#34;,<br />&#160; &#160; &#160; &#160; loadui: &#34;block&#34;<br />&#160; &#160; });<br /><br />&#160; &#160; var grid2data = [ {id:&#34;&#60;a href=&#39;#&#39; class=&#39;grid2click&#39;&#62;1&#60;/a&#62;&#34;,invdate:&#34;2007-10-01&#34;,name:&#34;test&#34;,note:&#34;note&#34;,amount:&#34;200.00&#34;,tax:&#34;10.00&#34;,total:&#34;210.00&#34;} ];<br /><br />&#160; &#160; var grid3obj = {<br />&#160; &#160; &#160; &#160; grid3data: [ {name:&#39;&#60;span class=&#34;provclick&#34;&#62;1st Action Services&#60;/span&#62;&#39;,ufoc:&#39;AA2143&#39;,assoc:&#39;Former Affiliate&#39;,city:&#39;Austell&#39;,state:&#39;GA&#39;,active:&#39;Inactive&#39;},{name:&#39;281-Flooded, Inc.&#39;,ufoc:&#39;351&#39;,assoc:&#39;Member&#39;,city:&#39;Houston&#39;,state:&#39;TX&#39;,active:&#39;Active&#39;},{name:&#39;Jim Davis Carpet Cleaning &#38; Restoration Services, Inc&#39;,ufoc:&#39;AA2177&#39;,assoc:&#39;Former Affiliate&#39;,city:&#39;Terre Haute&#39;,state:&#39;IN&#39;,active:&#39;Inactive&#39;},{name:&#39;A Fantabulous Restore Co.&#39;,ufoc:&#39;999&#39;,assoc:&#39;Member&#39;,city:&#39;Disasterville&#39;,state:&#39;IN&#39;,active:&#39;Active&#39;},{name:&#39;Stellar Restoration Services, Inc&#39;,ufoc:&#39;399&#39;,assoc:&#39;Affiliate&#39;,city:&#39;Bloomington&#39;,state:&#39;IL&#39;,active:&#39;Active&#39;},{name:&#39;We Do Trees Inc.&#39;,ufoc:&#39;778&#39;,assoc:&#39;National Partner&#39;,city:&#39;Forest Grove&#39;,state:&#39;WY&#39;,active:&#39;Active&#39;}]<br />&#160; &#160; };<br /><br />&#160; &#160; $(&#39;.grid1click&#39;).click(function(e){<br />&#160; &#160; &#160; &#160; e.preventDefault();<br />&#160; &#160; &#160; &#160; $(this).createDialog(contentDialog,&#34;Grid 2&#34;,[grid2data]);<br />&#160; &#160; });<br /><br />&#160; &#160; $(&#39;.grid2click&#39;).live(&#39;click&#39;,function(e){<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; e.preventDefault();<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; $(this).createDialog(contentDialog,&#39;Grid 3&#39;,[],grid3template(grid3obj)); &#160; &#160;<br />&#160; &#160; });</div><br /></div></pre>
]]></description>
        	        	<pubDate>Thu, 16 Jun 2011 18:50:03 +0300</pubDate>
        </item>
</channel>
</rss>