[help] YUI: DataTable with JSON - Cannot loading data?

Hi all.

I’m trying to learnt YUI step by step with examples in Yahoo developer site. Here original:
http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

I’m create a server script for output JSON string at:

http://localhost/it2/yuiclient/server/datasource.php?act=datatable

It’s return:

{"records":[{"p_i_id":"4","p_v_fullname":"Nguyen Van A","p_v_email":"acong@domain.com","p_i_del_flag":"0"},{"p_i_id":"3","p_v_fullname":"Thang Vu Hoang","p_v_email":"thang@comter.com","p_i_del_flag":"0"},{"p_i_id":"1","p_v_fullname":"Max Teer","p_v_email":"2mail@text.com","p_i_del_flag":"0"}]}

And here my JS code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo Without Server</title>
<!-- include style -->
<link rel="stylesheet" type="text/css" href="yui.2.6.0/build/tabview/assets/skins/sam/tabview.css">
<link rel="stylesheet" type="text/css" href="yui.2.6.0/build/datatable/assets/skins/sam/datatable.css">
<style type="text/css">
/*Nothing*/
</style>
<!-- javascript -->
<script type="text/javascript" src="yui.2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui.2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="yui.2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="yui.2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="yui.2.6.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="yui.2.6.0/build/json/json-min.js"></script>
</head>
<body class="yui-skin-sam">
<h3>Members List</h3>
<div id="container"></div>
<script type="text/javascript">
YAHOO.util.Event.on(window, "load", function(){
	YAHOO.example.okmen = function(){

		var columnDesc = [
 			{key:"p_i_id", sortable:true, resizeable:true},
 			{key:"p_v_fullname", sortable:true, resizeable:true},
 			{key:"p_v_email", sortable:true, resizeable:true},
 			{key:"p_i_del_flag", sortable:true, resizeable:true}
		];

		var myDataSource = new YAHOO.util.DataSource("http://localhost/it2/yuiclient/server/datasource.php?");
		var newRequest = "act=datatable";
		
		myDataSource.reponseType = YAHOO.util.DataSource.TYPE_JSON;
		myDataSource.reponseSchema = {
			resourceList: "records",
			fields: ["p_i_id", "p_v_fullname", "p_v_email", "p_i_del_flag"]			
		};
		
		var oConfigs = {
			initialRequest: newRequest, // Server parameters				
			width:'100&#37;'
		};
		
		var myDataTable = new YAHOO.widget.DataTable("container", columnDesc, myDataSource, oConfigs);
	}();
});
</script>
</body>
</html>

when i ran script in localhost:

It’s not loading JSON data from server script. Please help me fix this. Thanks so much.:slight_smile:

PS

I’m trying get data by client, replace JS script:


<script type="text/javascript">
YAHOO.example.Data = {"records":[{"p_i_id":"4","p_v_fullname":"Nguyen Van A","p_v_email":"acong@domain.com","p_i_del_flag":"0"},{"p_i_id":"3","p_v_fullname":"Thang Vu Hoang","p_v_email":"thang@comter.com","p_i_del_flag":"0"},{"p_i_id":"1","p_v_fullname":"Max Teer","p_v_email":"2mail@text.com","p_i_del_flag":"0"}]};

YAHOO.util.Event.addListener(window, "load", function(){
	YAHOO.example.Basic = function(){
		var columnDesc = [
 			{key:"p_i_id", sortable:true, resizeable:true},
 			{key:"p_v_fullname", sortable:true, resizeable:true},
 			{key:"p_v_email", sortable:true, resizeable:true},
 			{key:"p_i_del_flag", sortable:true, resizeable:true}
		];
		var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.records);	
		myDataSource.reponseType = YAHOO.util.DataSource.TYPE_JSON;
		myDataSource.reponseSchema = {
			resultsList: "records", 
			fields: ["p_i_id", "p_v_fullname", "p_v_email","p_i_del_flag"]
		};
		var myDataTable = new YAHOO.widget.DataTable("container", columnDesc, myDataSource);
	}();
});
</script>

It’s runing success:

Check the spelling of these member variables:


myDataSource.[b]reponseType[/b] = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.[b]reponseSchema[/b] = {

It’ my stupid typing error. Thanks your help.

Hi there,

I have the following code as provided below which is coming up with “Data Error” when viewed in browser.

I have an example.php page which when view in browsers outputs as follows…

{ “data”: [ { “ID” : “1”, “Area” : “Norwich North” }, { “ID” : “2”, “Area” : “Local” }, { “ID” : “3”, “Area” : “A12” }, { “ID” : “4”, “Area” : “A140” }, { “ID” : “6”, “Area” : “Harleston” }, { “ID” : “7”, “Area” : “Diss” } ] };

I do not really know if this correct or not, I know I also have to address the ID to numerics at some point, but main thing is to get my example working. could someone confirm the above format is correct to pass through to YUI Datasource and then YUI DataTable and perhaps help me with where I am going wrong with code extract below ?

Many thanks in advance.

Code for JSON conversion…example.php

<?php
require_once(‘Connections/MyConn.php’);
include ‘Connections/mysql2json.class.php’;
mysql_select_db($database_MyConn, $MyConn);
$num=0;
//any SQL select Query
$sql=“select * from tblAreas s”;
$result=@mysql_query($sql) or die(mysql_error());
$num=mysql_affected_rows();
//calling class
$objJSON=new mysql2json();
print(trim($objJSON->getJSON($result,$num)));
?>

Code Extract for DataTable…

var myDataSource = new YAHOO.util.DataSource(“example.php?”);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList: “data”,
fields: [“ID”, “Area”]
};