SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question YUI DataTable with JSON in Windows XP running Apache 2.2

    Hi Everyone,

    I am having trouble running a code that uses JSON to build a YUI DataTable. I'm using YUI 2.8.2.1 and running an Apache 2.2 server in Windows XP.

    I hardcoded the DataSource as a JSON string that looks like the following:


    Code:
      
    {"data":[{"id":"1","lastname":"Moore","firstname":"Demi"},{"id":"2","lastname":"Potter","firstname":"Harry"}]}

    The code for the page follows:


    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>User List No Server</title>
    
    <!-- YAHOO Global Object source file -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-min.js"></script>
    
    <!-- Event source file -->
    <script src="http://yui.yahooapis.com/2.8.2r1/build/event/event-min.js" ></script>
    
    
    <!-- include style -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/tabview/assets/skins/sam/tabview.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css">
    <style type="text/css">
    /*Nothing*/
    </style>
    
    <!-- javascript -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/element/element-beta-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/json/json-min.js"></script>
    
    </head>
    
    <body class="yui-skin-sam">
    
    <h3>User List</h3>
    
    <div id="container"></div>
    
    <script type="text/javascript">
    YAHOO.example.Data = {"data":[{"id":"1","lastname":"Moore","firstname":"Demi"},{"id":"2","lastname":"Potter","firstname":"Harry"}]}; 
    
    YAHOO.util.Event.addListener(window, "load", function(){
    	YAHOO.example.Basic = function(){
    
    		var columnDesc = [
     			{key:"id", sortable:true, resizeable:true},
     			{key:"lastname", sortable:true, resizeable:true},
     			{key:"firstname", sortable:true, resizeable:true}
    		];
    
    		var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.data); 
    		
    		myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    		myDataSource.responseSchema = {
    			resourceList: "data",
    			fields: ["id", "lastname", "firstname"]			
    		};
    	
    		var myDataTable = new YAHOO.widget.DataTable("container", columnDesc, myDataSource);
    	}();
    });
    </script>
    
    </body>
    
    </html>

    The error that I get is "Invalid callback for subscriber to 'end' at line 11 character 4854.

    Any help is appreciated. Thank you in advance.

    Regards,

    Rubiks

  2. #2
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it to work now.

    I needed to place the data inside the Event.

    Also, DataSource type to TYPE_JSARRAY.

    Now I'm working on tying things to a database.

    Thanks.

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Well, not I get an error "Data error." when trying to change what I had to work against a MySQL database.

    The datasource returns:

    Code:
    {"data":[{"id":"1","lastname":"Moore","firstname":"Demi"},{"id":"2","lastname":"Potter","firstname":"Harry"}]}
    which is correct.

    The code is:

    Code:
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>User List No Server</title>
    
    <!-- YAHOO Global Object source file -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-min.js"></script>
    
    <!-- Event source file -->
    <script src="http://yui.yahooapis.com/2.8.2r1/build/event/event-min.js" ></script>
    
    <!-- include style -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script>
    
    <!-- javascript -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/json/json-min.js"></script>
    
    </head>
    
    <body class="yui-skin-sam">
    
    <h3>User List</h3>
    
    <div id="container"></div>
    
    <script type="text/javascript">
    YAHOO.util.Event.addListener(window, "load", function(){
    
    	YAHOO.example.Basic = function(){
    
    		var columnDesc = [
     			{key:"id", 	  sortable:true, resizeable:true},
     			{key:"lastname",  sortable:true, resizeable:true},
     			{key:"firstname", sortable:true, resizeable:true}
    		];
    
    		var myDataSource = new YAHOO.util.DataSource("http://localhost/exchanges/exchange.php"); 
    
    		myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    		myDataSource.responseSchema = {
    			resourceList: "data",
    			fields: ["id", "lastname", "firstname"]			
    		}; 
    
    		var oConfigs = {
    			width:'100%'
    		};
    	
    		var myDataTable = new YAHOO.widget.DataTable("container", columnDesc, myDataSource, oConfigs); 
    
    	}();
    });
    </script>
    
    </body>
    
    </html>
    I bolded the parts where I made changes to make it easier to notice.

    Does anyone knows what is wrong with this code?

    Thanks in advance for your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •