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

DataTable Control (beta): XML Data Over XHR With POST

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

Name
Phone
City
Rating
Phone
City
Loading data...

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:YAHOO.util.DataSource.parseNumber},"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 | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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