Populates-a-DataTable-with-data-received-via-XHR-from-the-Yahoo-Local-webservice

YUI Library JavaScript DHTML


            

    
JSON Data Over XHR

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}












JSON Data Over XHR


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

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.XHR_JSON = function() {
        var formatUrl = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = "" + sData + "";
        };
        var myColumnDefs = [
            {key:"Title", label:"Name", sortable:true, formatter:formatUrl},
            {key:"Phone"},
            {key:"City"},
            {key:"Rating.AverageRating", label:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
        ];
        var myDataSource = new YAHOO.util.DataSource("yui_2.7.0b-assets/datatable-assets/php/ylocal_proxy.php?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.connXhrMode = "queueRequests";
        myDataSource.responseSchema = {
            resultsList: "ResultSet.Result",
            fields: ["Title","Phone","City",{key:"Rating.AverageRating",parser:"number"},"ClickUrl"]
        };
        var myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
                myDataSource, {initialRequest:"query=pizza&zip=94089&results=10&output=json"});
        var mySuccessHandler = function() {
            this.set("sortedBy", null);
            this.onDataReturnAppendRows.apply(this,arguments);
        };
        var myFailureHandler = function() {
            this.showTableMessage(YAHOO.widget.DataTable.MSG_ERROR, YAHOO.widget.DataTable.CLASS_ERROR);
            this.onDataReturnAppendRows.apply(this,arguments);
        };
        var callbackObj = {
            success : mySuccessHandler,
            failure : myFailureHandler,
            scope : myDataTable
        };

        myDataSource.sendRequest("query=mexican&zip=94089&results=10&output=json",
                callbackObj);
        myDataSource.sendRequest("query=chinese&zip=94089&results=10&output=json",
                callbackObj);

        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});



yui_2.7.0b.zip( 4,431 k)