jQWidgets Forums

jQuery UI Widgets Forums Grid Not loading data

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 9 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Not loading data #82047

    goldie
    Participant

    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

    Not loading data #82052

    Peter Stoev
    Keymaster

    Hi goldie,

    Create a data adapter and bind the Grid to it. You may also look at the online php demos.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Not loading data #82081

    goldie
    Participant

    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>
    Not loading data #82082

    Peter Stoev
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.