Dynamic column in jqgrid shows "Length of colNames <> colModel!" - php

Question

Please anyone help me in fixing this. I am trying add dynamic column names and column models information from the php script named simple8.php and the data is obtaining from the simple7.php.
<script type="text/javascript">
jQuery(function($) {
var seq= $('#sim').text();
var seq= seq.replace(/[\“\”\″]/ig,'\"');
var seq = jQuery.trim(seq);
var title = $('#title_for_table').text();
var title = jQuery.trim(title);
$.ajax({
url:"simple8.php"+seq,
type: "POST",
data: "",
dataType: "json",
success: function (data) {
var ColN = data.colNames;
var ColM = data.colModel;
jQuery("#tableid").jqGrid({
url: "simple7.php"+seq,
datatype: "jsonstring",
mtype: "POST",
colNames: ColN,
colModel: ColM,
pager: '#pager',
rowNum:50,
rowList:[25,50,75,100],
sortname: 'r1',
sortorder: "asc",
viewrecords: true,
gridview: true,
height: '100%',
width: '100%',
caption:title+" Search Results",
loadComplete: function(reload) {
jQuery("#tableid").trigger("reloadGrid");
},
});
jQuery("#tableid").jqGrid('navGrid','#pager',{add:false,edit:false,del:false});
jQuery("#tableid").jqGrid('navButtonAdd','#pager',{caption: "Export",onClickButton: function () { //exportExcel($(this));
ExportJQGridDataToExcel($(this),'file1.xls');
},position:"last"
});
},
error: function () {
alert("Error with AJAX callback");
}
});
});
</script>
the output of simple8.php is:
{"colNames":"['col','r1', 'r2', 'r3', 'r4', 'r5', 'r6', 'r7', 'r8', 'r9', 'r10', 'r11']","colModel":"[{name:'col', index:'col', width:120},{name:'r1', index:'r1', width:120},{name:'r2', index:'r2', width:120},{name:'r3', index:'r3', width:120},{name:'r4', index:'r4', width:120},{name:'r5', index:'r5', width:120},{name:'r6', index:'r6', width:120},{name:'r7', index:'r7', width:120},{name:'r8', index:'r8', width:120},{name:'r9', index:'r9', width:120},{name:'r10', index:'r10', width:120},{name:'r11', index:'r11', width:120}]"}
and simple7.php gives:
{"total":1,"page":1,"records":4,"rows":[{"id":null,"cell":["Chaffa","R","R","C","A","C","A","A","T","T","G","G"]},{"id":null,"cell":["CSG8962","R","R","Y","A","C","A","A","T","T","G","S"]},{"id":null,"cell":["DCP92_3","G","A","C","M","C","A","A","T","W","G","G"]},{"id":null,"cell":["DigVijay","R","A","C","A","C","A","A","T","T","G","S"]}]}
Please let me know where i am wrong.

Answer 1

The value of colNames is a string instead of array of items. The same one can say about colModel. You should change the data returned from the server to use only " instead of ' and then use colNames: $.parseJSON(ColN) and colModel: $.parseJSON(ColM) instead of colNames: ColN, colModel: ColM. Without replacing ' with " you will have error in parsing of JSON in $.parseJSON.