YUI Library Home

YUI Library Examples: DataTable Control: XML Data Over XHR With POST

DataTable Control: XML Data Over XHR With POST

This examples makes a POST query to the Yahoo! Local webservice to populate a DataTable.

View example in new window.

Phone
City
Loading...

Sample Code for this Example

Data:

1<?xml version="1.0"?> 
2<ResultSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:yahoo:lcl" xsi:schemaLocation="urn:yahoo:lcl http://api.local.yahoo.com/LocalSearchService/V2/LocalSearchResponse.xsd" totalResultsAvailable="501" totalResultsReturned="10" firstResultPosition="1"> 
3<ResultSetMapUrl>http://maps.yahoo.com/broadband/?q1=Sunnyvale%2C+CA+94089&tt=pizza&tp=1</ResultSetMapUrl> 
4    <Result> 
5        <Title>Giovannis Pizzeria</Title> 
6        <Address>1127 N Lawrence Expy</Address> 
7        <City>Sunnyvale</City> 
8        <State>CA</State> 
9        <Phone>(408) 734-4221</Phone> 
10        <Latitude>37.396953</Latitude> 
11        <Longitude>-121.995986</Longitude> 
12        <Rating> 
13            <AverageRating>4</AverageRating> 
14            <TotalRatings>51</TotalRatings> 
15            <TotalReviews>33</TotalReviews> 
16            <LastReviewDate>1191207644</LastReviewDate> 
17        </Rating> 
18        <Distance>0.62</Distance> 
19        <Url>http://local.yahoo.com/details?id=21341983&stx=pizza&csz=Sunnyvale+CA&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi</Url> 
20        <ClickUrl>http://local.yahoo.com/details?id=21341983&stx=pizza&csz=Sunnyvale+CA&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi</ClickUrl> 
21        <MapUrl>http://maps.yahoo.com/maps_result?name=Giovannis+Pizzeria&desc=4087344221&csz=Sunnyvale+CA&qty=9&cs=9&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi&gid1=21341983</MapUrl> 
22        <BusinessUrl></BusinessUrl> 
23        <BusinessClickUrl></BusinessClickUrl> 
24    </Result> 
25    ... 
26</ResultSet> 
view plain | print | ?

CSS:

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

Markup:

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

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.XHR_XML = new function() { 
3        this.formatUrl = function(elCell, oRecord, oColumn, sData) { 
4            elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>"; 
5        }; 
6 
7        var myColumnDefs = [ 
8            {key:"Title", label:"Name", sortable:true, formatter:this.formatUrl}, 
9            {key:"Phone"}, 
10            {key:"City"}, 
11            {key:"AverageRating", label:"Rating",formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} 
12        ]; 
13 
14        this.myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?"); 
15        this.myDataSource.connMethodPost = true; 
16        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; 
17        this.myDataSource.responseSchema = { 
18            resultNode: "Result", 
19            fields: ["Title","Phone","City",{key:"AverageRating",parser:"number"},"ClickUrl"] 
20        }; 
21 
22        this.myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs, 
23                this.myDataSource, {initialRequest:"query=pizza&zip=94089&results=10"}); 
24    }; 
25}); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 287ms (+1) 9:45:21 PM:
DataSource  instance0
Making connection to live data for "query=pizza&zip=94089&results=10"
INFO 286ms (+0) 9:45:21 PM:
DataTable  instance yui-dt0
DataTable showing message: Loading...
WARN 286ms (+0) 9:45:21 PM:
DataTable  instance yui-dt0
Could not find DragDrop for resizeable Columns
INFO 286ms (+2) 9:45:21 PM:
DataTable  instance yui-dt0
TH cells for 4 keys created
INFO 284ms (+1) 9:45:21 PM:
RecordSet  instance yui-rs0
RecordSet initialized
INFO 283ms (+1) 9:45:21 PM:
ColumnSet  instance yui-cs0
ColumnSet initialized
INFO 282ms (+8) 9:45:21 PM:
DataSource  instance0
DataSource initialized
INFO 274ms (+274) 9:45:21 PM:
LogReader  instance0
LogReader initialized
INFO 0ms (+0) 9:45:20 PM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataTable Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings