[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zpgrid/zpgrid/demo/ [ Home ]
File: yahoo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" It fetches data from a cross-domain source, in this case a Yahoo! search, and passes it to the grid. You can use a callback to format the data in any form. The data does not need to be displayed in an HTML table. In this case, we format the data in the familiar search-result layout. Notice that even in this layout you can use grid features such as sorting by fields. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Grid Widget - Yahoo Search Example</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
	<script type="text/javascript" src="../src/zpgrid.js"></script>
	<script type="text/javascript" src="demo.js"></script>

	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>
	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	
	<link href="../themes/layout.css" rel="stylesheet" type="text/css" />


	<!-- Load Zapatec Template Widget -->
	<script type="text/javascript" src="../../zptemplate/src/zptemplate.js"></script>

	<!-- Custom style sheets -->
	<style type="text/css">

		.myHeader {
			background-color: #efefef;;
			padding: .3em;
			margin: .3em;
			cursor: pointer;
		}

		.myPagination span {
			cursor: pointer;
		}

	</style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Yahoo Search Example</div>

<div class="mainCol">
	This example demonstrates use of cross-domain sources for the Grid.

		<div class='zpCalDemoText'>
		<ul>
		
		
				<li>It fetches data from a cross-domain source, in this case a Yahoo!
				 search, and passes it to the grid.</li>
				<li>You can use a callback to format the data in any form. The data does
				 not need to be displayed in an HTML table. In this case, we format the
				 data in the familiar search-result layout.<br />
				 Notice that even in this layout you can use grid features such as
				 sorting by fields.</li>

		</ul>
		</div>


	<div id="progress">Please wait while loading templates...</div>
	<div id="form" style="display:none">
		<form onSubmit="return doSearch()">
			<input type="text" size="40" id="searchInput" />
			<input type="button" value="Search" onclick="doSearch()" />
		</form>
	</div>
	<div id="results" style="padding-top:2em; padding-bottom:1em"></div>
	<div id="myOutput"></div>
</div>
<script type="text/javascript">

	/*
	 * Indicate that templates were loaded
	 */
	var bHeaderTplLoaded = false;
	var bRowTplLoaded = false;
	var bPaginationTplLoaded = false;

	/*
	 * Checks if all templates were loaded and enables input form
	 */
	function templateLoaded() {
		if (bHeaderTplLoaded) {
			document.getElementById('progress').style.display = 'none';
			document.getElementById('form').style.display = '';
		}
	}

	/*
	 * Load header template
	 */
	var oHeaderTpl = new Zapatec.Template({

		// Use file as data source
		source: 'yahoo-tpl-header.html',
		sourceType: 'html/url',

		// Set flag once the file is loaded
		eventListeners: {
			loadDataEnd: function() {
				bHeaderTplLoaded = true;
				templateLoaded();
			}
		}

	});

	/*
	 * Load row template
	 */
	var oRowTpl = new Zapatec.Template({

		// Use file as data source
		source: 'yahoo-tpl-row.html',
		sourceType: 'html/url',

		// Set flag once the file is loaded
		eventListeners: {
			loadDataEnd: function() {
				bRowTplLoaded = true;
				templateLoaded();
			}
		}

	});

	/*
	 * Load pagination template
	 */
	var oPaginationTpl = new Zapatec.Template({

		// Use file as data source
		source: 'yahoo-tpl-pagination.html',
		sourceType: 'html/url',

		// Set flag once the file is loaded
		eventListeners: {
			loadDataEnd: function() {
				bPaginationTplLoaded = true;
				templateLoaded();
			}
		}

	});

	/*
	 * Reference to input element
	 */
	var oSearchInput = document.getElementById('searchInput');
	try {
		oSearchInput.focus();
	} catch (oException) {};

	/*
	 * Application id
	 */
	var sAppId = 'zapatec1';

	/*
	 * Gets called from the form to do the search.
	 */
	function doSearch() {

		// Show "Loading" message
		Zapatec.Transport.showBusy({busyContainer: 'myOutput'});

		// Put search request
		var iResults = 100;
		Zapatec.Transport.includeJS(
		 'http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=' +
		 sAppId + '&query=' + oSearchInput.value + '&results=' + iResults +
		 '&output=json&callback=showResults');

		// Focus on input field
		oSearchInput.focus();

		// Stop form submission
		return false;

	};

	/*
	 * Handles the results from Yahoo, and feeds them to the grid widget.
	 */
	function showResults(oResult) {

		// Remove gif with message "Loading"
		Zapatec.Transport.removeBusy({busyContainer: 'myOutput'});

		// Check arguments
		if (oResult.Error) {
			document.getElementById('results').innerHTML =
			 '<div>Response received from Yahoo server:</div><div>' +
			 oResult.Error.Title + ' ' + oResult.Error.Message + '</div>';
			return;
		}

		// Display number of results
		var sTotalResults = oResult.ResultSet.totalResultsAvailable;
		var sFirstResPos = oResult.ResultSet.firstResultPosition;
		var iLastResPos = sFirstResPos * 1 +
		 oResult.ResultSet.totalResultsReturned * 1 - 1;
		document.getElementById('results').innerHTML = 'Results ' +
		 sFirstResPos + ' - ' + iLastResPos + ' of about ' + sTotalResults;

		// Structure of the output(grid) JSON object
		var oGridSource = {
			fields: [
				{title: "Title", dataType: "string"},
				{title: "Summary", dataType: "string"},
				{title: "URL", dataType: "string"},
				{title: "Modified", dataType: "timestampMMDDYYYY"}
			],
			rows: []
		};

		// Create an array of output JSON objects
		var aResult = oResult.ResultSet.Result;

		// Convert from Yahoo's JSON to the grid's
		for (var iRes = 0; iRes < aResult.length; iRes++) {
			oGridSource.rows.push({cells: [
				{v: (iRes + 1) + '. <a href="' + aResult[iRes].ClickUrl + '">' +
				 aResult[iRes].Title + '</a>'},
				{v: aResult[iRes].Summary},
				{v: aResult[iRes].Url},
				{v: aResult[iRes].ModificationDate}
			]});
		}

		// Initialize grid
		var oGrid = new Zapatec.Grid({

			// Use object as source
			source: oGridSource,
			sourceType: 'json',

			// Use myCallbackHeader function to display grid header
			callbackHeaderDisplay: myCallbackHeader,

			// Use myCallbackRow function to display grid row
			callbackRowDisplay: myCallbackRow,

			// Use myCallbackTotal function to display total row
			callbackTotalDisplay: myCallbackRow,

			// Use myCallbackPagination function to display grid pagination
			callbackPaginationDisplay: myCallbackPagination,

			// Use paging, display 10 rows per page
			rowsPerPage: 10,

			// Totals
			totals: [
				{
					column: 0,
					callback: Zapatec.Grid.count,
					label: 'Total results displayed:'
				}
			]

		});

	};

	/*
	 * Output container
	 */
	var oContainer = document.getElementById('myOutput');

	/*
	 * Gets called by the grid to display headers.
	 */
	function myCallbackHeader(oGrid) {

		// Do not output anything if there are no data available yet
		if (!oGrid.totalRecords()) {
			return;
		}

		// Assign template variables
		var aFields = oGrid.getFields();
		var iFields = aFields.length;
		var oField;
		for (var iCol = 0; iCol < iFields; iCol++) {
			oField = aFields[iCol];
			oHeaderTpl.assign('field' + iCol + 'OnClick', oGrid.getFieldOnclick(oField));
			oHeaderTpl.assign('field' + iCol + 'Title', oGrid.getFieldTitle(oField));
		}

		// Compile template and output result
		oContainer.innerHTML = oHeaderTpl.compile();

	};

	/*
	 * Gets called by the grid to display rows and totals.
	 */
	function myCallbackRow(oGrid, oRow) {

		// Assign template variables
		var aCells = oGrid.getRowCells(oRow);
		var iCells = aCells.length;
		for (var iCol = 0; iCol < iCells; iCol++) {
			oRowTpl.assign('cell' + iCol + 'Value', oGrid.getCellValueString(aCells[iCol]));
		}

		// Compile template and output result
		oContainer.innerHTML += oRowTpl.compile();

	};

	/*
	 * Gets called by the grid to display pagination.
	 */
	function myCallbackPagination(oGrid) {

		// Do not output anything if there are no data available yet
		if (!oGrid.totalRecords()) {
			return;
		}

		// Assign template variables
		oPaginationTpl.assign('gridId', oGrid.getId());
		oPaginationTpl.assign('currentPage', oGrid.getCurrentPageNumber() - 1);
		oPaginationTpl.assign('totalPages', oGrid.totalPages());

		// Compile template and output result
		oContainer.innerHTML += oPaginationTpl.compile();

	};

</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>