YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: DataTable Control: JSON Data Over XHR

DataTable Control: JSON Data Over XHR

This example populates a DataTable with data received via XHR from the Yahoo! Local webservice.

View example in new window.

Sample Code for this Example

Data:

1{"ResultSet":{ 
2    "totalResultsAvailable":665, 
3    "totalResultsReturned":10, 
4    "firstResultPosition":1, 
5    "ResultSetMapUrl":"http:\/\/local.yahoo.com\/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-", 
6    "Result":[{ 
7        "Title":"Pizza Depot", 
8        "Address":"919 E Duane Ave", 
9        "City":"Sunnyvale", 
10        "State":"CA", 
11        "Phone":"(408) 245-7760", 
12        "Latitude":"37.388537", 
13        "Longitude":"-122.003972", 
14        "Rating":{ 
15            "AverageRating":"3.5", 
16            "TotalRatings":"5", 
17            "TotalReviews":"5", 
18            "LastReviewDate":"1161495667"}, 
19        "Distance":"0.93", 
20        "Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--", 
21        "ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--", 
22        "MapUrl":"http:\/\/maps.yahoo.com\/maps_result?name=Pizza+Depot&desc=4082457760&csz=Sunnyvale+CA&qty=9&cs=9&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--&gid1=21332021", 
23        "BusinessUrl":"http:\/\/pizza-depot.com\/", 
24        "BusinessClickUrl":"http:\/\/pizza-depot.com\/"}, 
25 
26        ... 
27    ]} 
28} 
view plain | print | ?

CSS:

1/* No custom CSS. */ 
view plain | print | ?

Markup:

1<div id="json"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.XHR_JSON = function() { 
3        var formatUrl = function(elCell, oRecord, oColumn, sData) { 
4            elCell.innerHTML = "<a href='%20+%20oRecord.getData(%22ClickUrl%22)%20+%20' target='_blank'>" + sData + "</a>"; 
5        }; 
6 
7        var formatRating = function(elCell, oRecord, oColumn, sData) { 
8            elCell.innerHTML = (sData === null) ? "N/A" : YAHOO.util.Number.format(sData); 
9        }; 
10 
11        var myColumnDefs = [ 
12            {key:"Title", label:"Name", sortable:true, formatter:formatUrl}, 
13            {key:"Phone"}, 
14            {key:"City"}, 
15            {key:"Rating.AverageRating", label:"Rating", formatter:formatRating, sortable:true} 
16        ]; 
17 
18        var myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?"); 
19        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
20        myDataSource.connXhrMode = "queueRequests"; 
21        myDataSource.responseSchema = { 
22            resultsList: "ResultSet.Result", 
23            fields: ["Title","Phone","City",{key:"Rating.AverageRating",parser:"number"},"ClickUrl"] 
24        }; 
25 
26        var myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs, 
27                myDataSource, {initialRequest:"query=pizza&zip=94089&results=10&output=json"}); 
28 
29        var mySuccessHandler = function() { 
30            this.set("sortedBy", null); 
31            this.onDataReturnAppendRows.apply(this,arguments); 
32        }; 
33        var myFailureHandler = function() { 
34            this.showTableMessage(YAHOO.widget.DataTable.MSG_ERROR, YAHOO.widget.DataTable.CLASS_ERROR); 
35            this.onDataReturnAppendRows.apply(this,arguments); 
36        }; 
37        var callbackObj = { 
38            success : mySuccessHandler, 
39            failure : myFailureHandler, 
40            scope : myDataTable 
41        }; 
42 
43        myDataSource.sendRequest("query=mexican&zip=94089&results=10&output=json", 
44                callbackObj); 
45 
46        myDataSource.sendRequest("query=chinese&zip=94089&results=10&output=json", 
47                callbackObj); 
48 
49        return { 
50            oDS: myDataSource, 
51            oDT: myDataTable 
52        }; 
53    }(); 
54}); 
view plain | print | ?

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More DataTable Control Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings