Article
Using The Tabular Data Control in Internet Explorer
Page: 1 2
Tabular Data Control and JavaScript
It is possible to manipulate the tabular data control object using JavaScript. In the first example, the <SPAN> element displayed the first entry of the data file. Now, suppose we add another entry to the file; the data file (data1.txt) now looks like this:
name|age
~Premshree Pillai~|~19~
~Vinod~|~18~
Now, if we want to see the second entry (i.e. Vinod 18), we can do it like this:
<OBJECT ID="data1" CLASSID="CLSID:333C7BC4-460F-11D0-
BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="data1.txt">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="TextQualifier" VALUE="~">
<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
/* Get the complete data record set */
var dataSet=data1.recordset;
/* Go to next data */
dataSet.moveNext();
</SCRIPT>
<SPAN DATASRC="#data1" DATAFLD="name"></SPAN>
<SPAN DATASRC="#data1" DATAFLD="age"></SPAN>
Now, the output will be: Vinod 18
The above script is fairly self explanatory. Initially we store the entire data of the data file in a variable dataset using the recordset method. The moveNext() method points to the next data item (next row). Some of other methods that can be used are:
moveFirst()- Point to the first data item (first row)moveLast()- Point to the last data item (last row)EOF -This property is used to check whether we've reached the end of the file.
Now, I'll wrap up this article with a more dynamic example. I'll create a JavaScript Ticker that displays a number of messages with each message pointing to a particular URL. Here, the ticker will read its messages and the corresponding URL from a text file (tickerData.txt from the archive). For a full understanding of this code, you must be familiar with dynamic HTML techniques.
Here's the tickerData.txt file:
~message~|~messageURL~
~SitePoint.com~|~http://www.sitepoint.com~
~WebmasterBase~|http://www.webmasterbase.com~
~BBC News~|http://www.bbc.co.uk~
And the tickerStyle.css file:
.tickerStyle{font-family:verdana,arial,helvetica; color:#666699;
font-weight:bold; font-size:8pt; background:#EEEEFF;
border-right:#666699 solid 2px; border-left:#666699 solid 1px;
border-top:#666699 solid 1px; border-bottom:#666699 solid 2px;
padding:3px; width:400px; text-align:center; text-decoration:none}
.tickerStyle:hover{font-family:verdana,arial,helvetica;
color:#666699; font-weight:bold; font-size:8pt; background:#DDDDEE;
border-right:#666699 solid 1px; border-left:#666699 solid 2px;
border-top:#666699 solid 2px; border-bottom:#666699 solid 1px;
padding:3px; width:400px; text-align:center; text-decoration:none}
And lastly, ticker.htm:
<html>
<head>
<title>JavaScript Ticker (using Tabular Data Control)</title>
<link rel="stylesheet" href="tickerStyle.css">
<script language="JavaScript">
// JavaScript Ticker
// - using Tabular Data Control
// By Premshree Pillai
/*
The Ticker function
objName : the ID of the object to be used as data source
maxMsgs : the number of messages in the data file
counter : to keep count of the messages
timeOut : delay (in milliseconds)
*/
function TDC_Ticker(objName, counter, maxMsgs, timeOut)
{
try
{
eval('tickerSet=' + objName + '.recordset');
if(!tickerSet.EOF && counter<maxMsgs-1)
{
tickerSet.MoveNext();
counter++;
}
else
{
counter=0;
tickerSet.MoveFirst();
}
setTimeout("TDC_Ticker('"+objName+"','"+counter+"',
'"+maxMsgs+"','"+timeOut+"')", timeOut);
}
catch(e)
{
alert('This Ticker works with IE 4+ only.');
}
}
</script>
<!-- END JAVASCRIPT TICKER USING TABULAR DATA CONTROL -->
</head>
<body bgcolor="#FFFFFF">
<!-- BEGIN TICKER PLACEMENT -->
<center>
<object id="ticker" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="tickerData.txt">
<param name="UseHeader" value="TRUE">
<param name="TextQualifier" value="~">
<param name="FieldDelim" value="|">
</object>
<a href="" datasrc="#ticker" datafld="messageURL" class="tickerStyle">
<span id="tickerDiv" datasrc="#ticker" datafld="message"></span>
</a>
<script language="JavaScript">
var tickerMaxMsgs=3; // Maximum Messages in the Data File
var tickerCount=tickerMaxMsgs;
new TDC_Ticker('ticker',tickerCount,tickerMaxMsgs,2000); // Set the Ticker
</script>
</center>
<!-- END TICKER PLACEMENT -->
</body>
</html>