jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Not loading data
Tagged: grid, jquery grid, jqwidgets grid, jqxgrid
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 4 months ago.
-
AuthorNot loading data Posts
-
Hello,
I’m trying to bind jquery grid to MySQL database so I am following the demo/example provided with jqwidget.
The result of echoing out the json worked.
Results:
[{“riskID”:”1″,”serverName”:”APOLLO”,”mgmtIP”:”100.0.0.0″,”org”:”CF”,”devPOC”:”John Smith”,”active”:”Yes”,”pii”:”Yes”,”extFace”:”No”,”webServer”:”No”,”dc”:”No”,”db”:”Yes”,”pc”:”No”,”sysConnect”:”Yes”,”publicAccess”:”No”,”cuiData”:”Yes”,”privHost”:”No”},{“riskID”:”2″,”serverName”:”ZEUS”,”mgmtIP”:”100.0.0.1″,”org”:”CF”,”devPOC”:”John Smith”,”active”:”No”,”pii”:”Yes”,”extFace”:”No”,”webServer”:”No”,”dc”:”No”,”db”:”Yes”,”pc”:”Yes”,”sysConnect”:”Yes”,”publicAccess”:”No”,”cuiData”:”Yes”,”privHost”:”No”}]I have added the following in the heading of the html:
<!-- jQuery --> <script type="text/javascript" src="..//jqwidgets/scripts/jquery-1.11.1.min.js"></script> <!-- jqWidget --> <link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxtabs.js"></script> <!-- testing for grid --> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
Now, the actual page for the grid:
<script type="text/javascript"> var $jsquery = jQuery.noConflict(); $jsquery(document).ready(function () { var source = { datatype: "json", cache: false, datafields: [ { name: 'riskID', type: 'string'}, { name: 'serverName', type: 'string'}, { name: 'mgmtIP', type: 'string'}, { name: 'org', type: 'string'}, { name: 'devPOC', type: 'string'}, { name: 'active', type: 'string'}, { name: 'pii', type: 'string'}, { name: 'extFace', type: 'string'}, { name: 'webServer', type: 'string'}, { name: 'dc', type: 'string'}, { name: 'db', type: 'string'}, { name: 'pc', type: 'string'}, { name: 'sysConnect', type: 'string'}, { name: 'publicAccess', type: 'string'}, { name: 'cuiData', type: 'string'}, { name: 'privHost', type: 'string'}, ], url: 'testGridData.php' }; //create jqxgrid $jsquery("#jqxgrid").jqxGrid( { source: source, columns: [ { text: 'RiskID', datafield: 'riskID', width: 100 }, { text: 'Server Name', datafield: 'serverName', width: 250}, { text: 'Management IP', datafield: 'mgmtIP', width: 150 }, { text: 'Organization', datafield: 'org', width: 150 }, { text: 'Dev POC', datafield: 'devPOC', width: 180 }, { text: 'Active', datafield: 'active', width: 50 }, { text: 'PII', datafield: 'pii', width: 50 }, { text: 'External Facing', datafield: 'extFace', width: 125 }, { text: 'Web Server', datafield: 'webServer', width: 125 }, { text: 'Domain Controller', datafield: 'dc', width: 125 }, { text: 'Database', datafield: 'active', width: 100 }, { text: 'Physical Component', datafield: 'pc', width: 125 }, { text: 'System Connection', datafield: 'sysConnect', width: 125 }, { text: 'Public Access', datafield: 'publicAccess', width: 125 }, { text: 'Sensitive Data', datafield: 'cuiData', width: 125 }, { text: 'Host Privileges', datafield: 'privHost', width: 125 } ] }); }); </script> <div id="jqxWidget" style="width:100%;"> <div id="jqxgrid" style="margin:0px; width:100%; min-height:800px; float:left; "></div> </div>
What am I doing wrong that the only thing I’m seeing the spinning “loading” image?
Please help.
–goldie
Hi goldie,
Create a data adapter and bind the Grid to it. You may also look at the online php demos.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
I did that too and still the same result.
<script type="text/javascript"> var $jsquery = jQuery.noConflict(); $jsquery(document).ready(function () { var source = { datatype: "json", cache: false, datafields: [ { name: 'riskID', type: 'string'}, { name: 'serverName', type: 'string'}, { name: 'mgmtIP', type: 'string'}, { name: 'org', type: 'string'}, { name: 'devPOC', type: 'string'}, { name: 'active', type: 'string'}, { name: 'pii', type: 'string'}, { name: 'extFace', type: 'string'}, { name: 'webServer', type: 'string'}, { name: 'dc', type: 'string'}, { name: 'db', type: 'string'}, { name: 'pc', type: 'string'}, { name: 'sysConnect', type: 'string'}, { name: 'publicAccess', type: 'string'}, { name: 'cuiData', type: 'string'}, { name: 'privHost', type: 'string'}, ], url: 'testGridData.php' }; var dataAdapter = new $jsquery.jqx.dataAdapter(source); // initialize jqxGrid $jsquery("#jqxgrid").jqxGrid( { source: dataAdapter, columns: [ { text: 'RiskID', datafield: 'riskID', width: 100 }, { text: 'Server Name', datafield: 'serverName', width: 250}, { text: 'Management IP', datafield: 'mgmtIP', width: 150 }, { text: 'Organization', datafield: 'org', width: 150 }, { text: 'Dev POC', datafield: 'devPOC', width: 180 }, { text: 'Active', datafield: 'active', width: 50 }, { text: 'PII', datafield: 'pii', width: 50 }, { text: 'External Facing', datafield: 'extFace', width: 125 }, { text: 'Web Server', datafield: 'webServer', width: 125 }, { text: 'Domain Controller', datafield: 'dc', width: 125 }, { text: 'Database', datafield: 'active', width: 100 }, { text: 'Physical Component', datafield: 'pc', width: 125 }, { text: 'System Connection', datafield: 'sysConnect', width: 125 }, { text: 'Public Access', datafield: 'publicAccess', width: 125 }, { text: 'Sensitive Data', datafield: 'cuiData', width: 125 }, { text: 'Host Privileges', datafield: 'privHost', width: 125 } ] }); }); </script> <div id="jqxWidget" style="width:100%;"> <div id="jqxgrid" style="margin:0px; width:100%; min-height:800px; float:left; "></div> </div>
Hi Linda,
1. style=”margin:0px; width:100%; min-height:800px; float:left; ” – Thus should be removed.
2. { name: ‘privHost’, type: ‘string’}, – remove “,” – this is a syntax error.
3. Check your browser’s console for errors.Let’s not duplicate post same things over email and in the forum.
Best Regards,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.