[ 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: realtime_update_xml.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=" The grid is initialized from XML source. Company column is used as primary key. This gives ability easily to synchronize grid with server database in real time. Updated row is specified with value of primary key column instead of internal grid row id. Once the grid is initialized, it starts to poll server script realtime_update_xml.php every second. Server script generates random prices for one or several companies at a time and returns them as XML string. Data are formed on the server to pass them directly into spliceXml method of the grid without conversion. String generated by the server is fetched and parsed into XML Documnet object using Zapatec.Transport.fetchXmlDoc function. ">
	<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 - Real Time Update With XML 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" />



	<!-- XML support for grid -->
	<script type="text/javascript" src="../src/zpgrid-xml.js"></script>

	<!-- Custom style for grid -->
	<style type="text/css">
		.zpGridWinxp .zpGridTable .zpGridRow .zpGridCell4 {
			font: 9px tahoma,arial,sans-serif;
			color: #999;
		}
	</style>



</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Real Time Update With XML Example</div>

This is a basic example showing a grid of the performance of the stock of
various companies updated in real time. Update is done on a row basis. See also
<a href="realtime_update_json.html">example with JSON source</a>.<br/>
<strong>Note: All prices and other data used in this demo are
fictitious.</strong>

		<div class='zpCalDemoText'>
		<ul>
		
		
<li>The grid is initialized from XML source.</li>
<li><b>Company</b> column is used as primary key. This gives ability easily to
 synchronize grid with server database in real time. Updated row is specified
 with value of primary key column instead of internal grid row id.</li>
<li>Once the grid is initialized, it starts to poll server script
 <i>realtime_update_xml.php</i> every second.</li>
<li>Server script generates random prices for one or several companies at a time
 and returns them as XML string. Data are formed on the server to pass them
 directly into <i>spliceXml</i> method of the grid without conversion.</li>
<li>String generated by the server is fetched and parsed into XML Documnet
 object using <i>Zapatec.Transport.fetchXmlDoc</i> function.</li>

		</ul>
		</div>



<div class="mainCol">
	<div id="gridContainer"></div>
</div>

<script type="text/javascript">

/*
 * Check if demo was loaded from server
 */
if (document.location.toString().indexOf('http') != 0) {
	alert('Since this example demonstrates interaction between server and \
javascript application, it must be loaded from server. This example does \
not work if opened from local hard drive.');
} else {

	/*
	 * Updates grid with data received from server.
	 */
	function updateGrid(oDocument) {

		// Update grid
		oGrid.spliceXml(oDocument);

		// Schedule next update in 1 second
		setTimeout(getUpdates, 1000);

	}

	/*
	 * Receives updates from server.
	 */
	function getUpdates() {

		// Get XML fragment with updates from server
		Zapatec.Transport.fetchXmlDoc({

			// Get data from realtime_update_xml.php script preventing caching
			url: 'realtime_update_xml.php?' + Math.random(),

			// Pass received XML fragment to updateGrid function
			onLoad: updateGrid

		});

	}

	/*
	 * Conversion method for custom "float" data type.
	 */
	function convertFloat(objCell) {
		objCell = this.convertFloat(objCell);
		if (objCell.c < 0) {
			objCell.style = 'color:#c00';
		} else if (objCell.c > 0) {
			objCell.style = 'color:#090';
		}
		return objCell;
	}

	/*
	 * Setup custom "float" data type
	 */
	Zapatec.Grid.createType(convertFloat, 'myFloat', 'zpGridTypeFloat');

	/*
	 * Initial grid source.
	 */
	var sSource = '<?xml version="1.0"?> \
	 <grid><table primarykey="0"><fields> \
	 <field><title>Company</title><datatype>string</datatype></field> \
	 <field><title>Price</title><datatype>float</datatype></field> \
	 <field><title>Change</title><datatype>myFloat</datatype></field> \
	 <field><title>%Change</title><datatype>myFloat</datatype></field> \
	 <field><title>Last Update</title><datatype>timestamp</datatype></field> \
	 </fields><rows> \
	 <row><cell>Alcoa Inc</cell> \
		<cell>28.41</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>AT&amp;T Inc.</cell> \
		<cell>32.65</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>General Electric Company</cell> \
		<cell>35.59</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>General Motors Corporation</cell> \
		<cell>35.31</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>Intel Corporation</cell> \
		<cell>21.95</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>Microsoft Corporation</cell> \
		<cell>29.22</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>Pfizer Inc</cell> \
		<cell>26.25</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>The Home Depot, Inc.</cell> \
		<cell>37.76</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>Verizon Communications</cell> \
		<cell>36.25</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 <row><cell>Walt Disney Company</cell> \
		<cell>32.53</cell><cell>0</cell><cell>0</cell><cell>0</cell></row> \
	 </rows></table></grid>';

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

		// Use XML fragment as data source
		source: sSource,
		sourceType: 'xml',

		// Use winxp theme
		theme: 'winxp',

		// Put grid into element with id gridContainer
		container: 'gridContainer',

		// Initially sort ascending by first column
		sortColumn: 0,

		// Start to get updates once the Grid is initialized
		eventListeners: {
			gridInitialized: getUpdates
		}

	});

}

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