preparing for 2.6 yui upgrade
This commit is contained in:
JT Smith
parent
eea207b3ec
commit
a041e93da8
1632 changed files with 0 additions and 812103 deletions
|
|
@ -1,157 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Datatable with Autocomplete</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/json/json-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-min.js"></script>
|
||||
|
||||
<!--there is no custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Datatable with Autocomplete</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example uses two <a href="http://developer.yahoo.com/yui/autocomplete/">AutoComplete Controls</a> to populate a DataTable with data received via XHR from the Yahoo! Local webservice.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<style type="text/css">
|
||||
#autocomplete, #autocomplete_zip {
|
||||
height: 25px;
|
||||
}
|
||||
#dt_input, #dt_input_zip {
|
||||
position: static;
|
||||
width: 300px;
|
||||
}
|
||||
#dt_input_zip {
|
||||
width: 60px;
|
||||
}
|
||||
#dt_ac_container, #dt_ac_zip_container {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="autocomplete">
|
||||
<label for="dt_input">Search Term: </label><input id="dt_input" type="text" value="pizza">
|
||||
<div id="dt_ac_container"></div>
|
||||
</div>
|
||||
<div id="autocomplete_zip">
|
||||
<label for="dt_input_zip">Zip Code: </label><input id="dt_input_zip" type="text" value="94089">
|
||||
<div id="dt_ac_zip_container"></div>
|
||||
</div>
|
||||
|
||||
<div id="json"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var Dom = YAHOO.util.Dom,
|
||||
Event = YAHOO.util.Event,
|
||||
queryString = '&results=20&output=json',
|
||||
zip = null,
|
||||
myDataSource = null,
|
||||
myDataTable = null;
|
||||
|
||||
var getZip = function(query) {
|
||||
query = parseInt(query, 10);
|
||||
if (!YAHOO.lang.isNumber(query)) {
|
||||
query = zip;
|
||||
Dom.get('dt_input_zip').value = zip;
|
||||
YAHOO.log('Invalid zip code, must be a number', 'warn', 'example');
|
||||
}
|
||||
myDataSource.sendRequest('datatable=yes&zip=' + query + '&query=' + Dom.get('dt_input').value + queryString,
|
||||
myDataTable.onDataReturnInitializeTable, myDataTable);
|
||||
};
|
||||
var getTerms = function(query) {
|
||||
myDataSource.sendRequest('datatable=yes&query=' + query + '&zip=' + Dom.get('dt_input_zip').value + queryString,
|
||||
myDataTable.onDataReturnInitializeTable, myDataTable);
|
||||
};
|
||||
|
||||
Event.onDOMReady(function() {
|
||||
zip = Dom.get('dt_input_zip').value;
|
||||
|
||||
var oACDS = new YAHOO.widget.DS_JSFunction(getTerms);
|
||||
oACDS.queryMatchContains = true;
|
||||
var oAutoComp = new YAHOO.widget.AutoComplete("dt_input","dt_ac_container", oACDS);
|
||||
|
||||
|
||||
var oACDSZip = new YAHOO.widget.DS_JSFunction(getZip);
|
||||
oACDSZip.queryMatchContains = true;
|
||||
var oAutoCompZip = new YAHOO.widget.AutoComplete("dt_input_zip","dt_ac_zip_container", oACDSZip);
|
||||
//Don't query until we have 5 numbers for the zip code
|
||||
oAutoCompZip.minQueryLength = 5;
|
||||
|
||||
var formatUrl = function(elCell, oRecord, oColumn, sData) {
|
||||
elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
|
||||
};
|
||||
|
||||
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
|
||||
}
|
||||
];
|
||||
|
||||
myDataSource = new YAHOO.util.DataSource("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:YAHOO.util.DataSource.parseNumber
|
||||
},
|
||||
"ClickUrl"
|
||||
]
|
||||
};
|
||||
|
||||
myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
|
||||
myDataSource, {initialRequest: 'datatable=yes&query=' + Dom.get('dt_input').value + '&zip=' + Dom.get('dt_input_zip').value + queryString });
|
||||
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue