I need to get to a solution similar to this one
The thing is: I would like to get the column names/model from the JSON data.
The solution provided on the link works but once the data is obtained it becomes 'local' to jqgrid and then the server stuff does not work.
From the link:
$("#dataGrid").jqGrid({
datatype: 'local',
From the docs:
"...after the data is retrieved the datatype option automatically is set to local - i.e. (currently) the paging will not work!"
I need to find a way to get data and grid columns from JSON call AND still be able to paginate, etc.
Ideally the one and only call to get JSON data via AJAX would be enough to get the data and colmodel definition. But if I need to make two calls I can live with that.
Any ideas?
Thanks, JMG.
Adding my tests:
The HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript" src="JScript/core.js"></script>
<script type="text/javascript" src="JScript/jquery-1.6.1.js"></script>
<script type="text/javascript" src="JScript/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="JScript/jquery-cookie.js"></script>
<script type="text/javascript" src="JScript/jquery-jqgrid-4.1.1-locale-en.js"></script>
<script type="text/javascript" src="JScript/jquery-jqgrid-4.1.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "TableData_jqgrid3.php",
data: "",
dataType: "json",
success: function(result)
{
colD = result.gridModel;
colN = result.colNames;
colM = result.colModel;
jQuery("#list2").jqGrid({
jsonReader : {
repeatitems: false,
root:"dataset",
cell: "",
id: "0"
},
url: 'TableData_jqgrid.php',
datatype: 'json',
mtype: 'POST',
datastr : colD,
colNames: colN,
colModel: colM,
pager: jQuery('#pager2'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
loadComplete: function(data){alert('loaded');},
loadError: function(xhr,status,error){alert('error');}
})
},
error: function(x, e)
{
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);
});
</script>
<title>JQuery Test</title>
</head>
<body>
<table id="list2"></table> <div id="pager2"></div>
</body>
Then TableData_jqgrid3.php is:
lg_send_error_mail('Table_Data3', serialize($_REQUEST));
$ret = <<<EOF
{
"JSON":"success",
"colModel":[
{"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300},
{"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300}
],
"colNames":["UserInfo ID","User ID"],
"gridModel":{
"dataset":[
{"userID":"SMI","userInfoId":5},
{"userID":"ABC","userInfoId":7},
{"userID":"PQR","userInfoId":8},
{"userID":"FUR","userInfoId":10},
{"userID":"COO","userInfoId":13}
],
"page":1,
"records":56,
"rows":15,
"sidx":null,
"sord":"asc",
"total":0
}
}
EOF;
print $ret;
I am using lg_send_error_mail to get the request and I get:
a:0:{}
So for TableData_jqgrid.php, which is:
lg_send_error_mail('Table_Data', serialize($_REQUEST));
exit;
I get:
a:7:{s:7:"_search";s:5:"false";s:2:"nd";s:13:"1309886279033";s:4:"rows";s:1:"5";s:4:"page";s:1:"1";s:4:"sidx";s:0:"";s:4:"sord";s:3:"asc";s:9:"PHPSESSID";s:26:"fj88f7aebqtdu0lsam0iagdbk1";}
One option I see is to call the same server script twice with a variable for data and a different request variable for colmodel. (like TableData_jqgrid.php?type=colmodel or something like that)
BUT it seems the data is already created before the call to the AJAX on jqgrid itself (inner call).
Does all this make sense?
I am missing something?
Thank you, JM
Update on JUL-6:
This is the best I could get:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "TableData_jqgrid4.php?t=COLMODEL",
dataType: "json",
success: function(result)
{
colM = result.colModel;
jQuery("#list2").jqGrid({
url: 'TableData_jqgrid4.php?t=DATA',
datatype: 'json',
mtype: 'POST',
colModel: colM,
pager: jQuery('#pager2'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
//loadComplete: function(data){alert('loaded');},
loadError: function(xhr,status,error){alert('error');}
})
},
error: function(x, e)
{
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);
});
</script>
The first AJAX call gets the table model then the jqgrid call get the data to populate the table. As the second call has the pagination parameters, all (meaning the server data stuff) seems to work OK.
I really don't like this solution having to call twice the server script, one for the columns definition and another one for the data. This is neither elegant or practical.
I would like to get the definition AND the data on the same AJAX response.
Does any of you know how to do that?
I think this solution is not acceptable for our developments...
Thank you, JM.
