[ 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_ondemand.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. Unlike Yahoo Search Example, paging is performed on the server. Server-side sorting, filtering, ranging, etc. are possible, but currently are not provided by Yahoo! search. See Server-Side Grid Example for more information about these features. ">
	<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 - Cross-Domain Server-Side Grid 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" />


	<style type="text/css">

		.myPagination span {
			cursor: pointer;
		}

	</style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Cross-Domain Server-Side Grid Example</div>

<div class="mainCol">
	This example demonstrates use of dataOnDemand feature together with
	cross-domain JavaScript calls.

		<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>Unlike <a href="yahoo.html">Yahoo Search Example</a>, paging is
				 performed on the server.
				<li>Server-side sorting, filtering, ranging, etc. are possible, but
				 currently are not provided by Yahoo! search. See
				 <a href="phone_ondemand.html">Server-Side Grid Example</a> for more
				 information about these features.</li>

		</ul>
		</div>


	<form onSubmit="return doSearch()">
		<input type="text" size="40" id="searchInput" />
		<input type="button" value="Search" onclick="doSearch()" />
	</form>
	<div id="results" style="margin-top:2em"></div>
	<div id="myOutput"></div>
</div>
<script type="text/javascript">

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

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

	/*
	 * Number of search results per page
	 */
	var iResultsPerPage = 10;

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

	/*
	 * Puts search request and returns grid source depending on passed
	 * arguments.
	 */
	function getSource(oArgs) {

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

		// Get new page number
		var iPage = 0;
		if (oArgs && oArgs.currentPage) {
			iPage = oArgs.currentPage;
		}

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

		// Set current page number
		oGridSource.currentPage = iPage;

		// Return modified grid source
		return {
			source: Zapatec.Utils.clone(oGridSource),
			sourceType: 'json'
		};

	}

	/*
	 * Will hold grid object
	 */
	var oGrid;

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

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

			// Use server-side paging, sorting, filtering and search
			dataOnDemand: true,

			// Use callback function to get source
			callbackSource: getSource,

			// 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

		});

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

		// Stop form submission
		return false;

	};

	/*
	 * Handles the results from Yahoo, and feeds them to the grid.
	 */
	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;

		// Check if grid is initialized
		if (!oGrid) {
			return;
		}

		// Get current page number
		var iCurrentPage = oGrid.getCurrentPageNumber();

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

		// Grid rows
		var aRows = [];

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

		// Set number of displayed rows
		oGrid.setDisplayedRows(sTotalResults);

		// Replace data in the grid
		oGrid.splice({
			atRow: 0,
			howMany: iResultsPerPage,
			rows: aRows
		});

		// Set current page number because splice resets it to 0
		oGrid.setCurrentPage(iCurrentPage - 1);

	};

	/*
	 * The rest of code is responsible for visualisation
	 */
	var oContainer = document.getElementById('myOutput');
	var sSearchUrl = '';

	/*
	 * 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;
		}
		var aHtml = [];
		//aHtml.push(sSearchUrl); //uncomment to see the url
		// Header is not needed for this grid example
		oContainer.innerHTML = aHtml.join('');
	};

	/*
	 * Gets called by the grid to display rows and totals.
	 */
	function myCallbackRow(oGrid, oRow) {
		var aHtml = [];
		aHtml.push('<div class="myRow" style="');
		aHtml.push(oGrid.getRowStyle(oRow));
		aHtml.push('">');
		var aCells = oGrid.getRowCells(oRow);
		for (var iCol = 0; iCol < aCells.length; iCol++) {
			var oCell = aCells[iCol];
			var sValue = oGrid.getCellValueString(oCell);
			if (sValue) {
				aHtml.push('<br/> <span style="');
				aHtml.push(oGrid.getCellStyle(oCell));
				aHtml.push('">');
				aHtml.push(sValue);
				aHtml.push('</span>');
			}
		}
		aHtml.push('</div>');
		oContainer.innerHTML += aHtml.join('');
	};

	/*
	 * 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;
		}
		var iCurrentPage = oGrid.getCurrentPageNumber();
		var aHtml = [];
		aHtml.push('<br /><div class="myPagination"><table cellpadding="0" \
		 cellspacing="0" style="width:100%"><tbody><tr><td>');
		if (iCurrentPage > 1) {
			// Don't display previous on the first page
			aHtml.push('<span onclick="Zapatec.Grid.previousPage(\'');
			aHtml.push(oGrid.getId());
			aHtml.push('\')">&lt;&lt; Previous</span>');
		}
		aHtml.push('&nbsp; Page ');
		aHtml.push(iCurrentPage);
		aHtml.push(' of ');
		var iPages = oGrid.totalPages();
		aHtml.push(iPages);
		aHtml.push(' &nbsp; ');
		if (iCurrentPage < iPages) {
			aHtml.push('<span onclick="Zapatec.Grid.nextPage(\'');
			aHtml.push(oGrid.getId());
			aHtml.push('\')">Next &gt;&gt;</span>');
		}
		aHtml.push('</td></tr></tbody></table></div>');
		oContainer.innerHTML += aHtml.join('');
	};

</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>