ActiveX --- Tabular Data Control (IE)

setTimeout, a method of the window object

Credits: This tutorial is written by Premshree Pillai with changes and additions by JavaScriptKit.com. See footnote for more information on author.

Tabular Data Control is a Microsoft ActiveX control that comes pre-installed with all versions of IE4+. This useful control allows you to access, display, and even sort ASCII information stored on the server end, such as a .txt file. In other words, it creates a simple "database" function without the need for server side scripting such as PHP and mySQL. A client side language such as JavaScript handles the more sophisticated features of Tabular Data Control. In a nutshell, TDC renders a simple client side database!

As mentioned, the tabular data control is available in IE 4 and upwards. Netscape requires a plug-in for the same function to work.

Implementation :

The ActiveX control is initialized using the <OBJECT> tag. The CLASSID (unique identifier) for the tabular data control is

CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83

Thus we initialize this control in a web page as follows :

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
...
...
...
</OBJECT>

• DataURL: The path of the file that contains the data. For eg "data.txt".
• UseHeader: Specifies whether the first line of the data file should be used as reference names for their respective fields below. If specified to false, use "Column1", "Column2" etc instead. The default value is false.
• TextQualifier: Specifies the optional character that surrounds a field.
• FieldDelim: Specifies the character that is used to separate each field in the data file. The default character is the comma (,). For eg, consider a data file where we have the fields data: *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is '|' and '*' is  the text qualifier.
• RowDelim: Specifies the character used to mark the end of each row of data. The default character is the newline (NL) character.

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="YourDataFile.txt">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="TextQualifier" VALUE="~">
<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

First, let us consider a simple example where I store my name and age in a text file data1.txt. Here is the file:

data1.txt:

name|age
~Premshree Pillai~|~19~

Corresponding HTML page:

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

<SPAN DATASRC="#data1" DATAFLD="name"></SPAN>
<SPAN DATASRC="#data1" DATAFLD="age"></SPAN>

Note the attributes within the SPAN tags. DATASRC specifies the data source to use, which is the same as the ID of the object we have initialized (here, 'data1'). The DATAFLD attribute specifies which field of the data we want to display. The data file data1.txt had two fields 'name' and 'age' as you can see. Specifying the DATAFLD as 'name' will display the name.

Now, the above example, while perfectly valid, reveals a potential shortcoming of the technique- as we add and remove data in the text file, we also need to then update the corresponding HTML on the page to accommodate this change (ie: add/remove <span> tags). This process quickly becomes cumbersome depending on the size of our database and how often it changes. Fortunately for these situations there is another way to display the data that is both dynamic and self-correcting.

Using the <table> tag to handle Tabular Data Control

Consider a simple example where we store the name, age and sex of 6 persons in a text file. Now, we want to extract this data and display it on the web page in a tabular form.

The text file looks like this :

data2.txt:

name|age|sex
~Premshree Pillai~|~19~|~male~
~Vinod~|~18~|~male~
~Usha~|~19~|~female~
~John~|~25~|~male~
~Jimmy~|~17~|~male~
~Andrew~|~39~|~male~

<OBJECT ID="data2" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
	<PARAM NAME="DataURL" VALUE="data2.txt">
	<PARAM NAME="UseHeader" VALUE="TRUE">
	<PARAM NAME="TextQualifier" VALUE="~">
	<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

<TABLE DATASRC="#data2" BORDER="2">
<THEAD>
	<TH>Name :</TH>
	<TH>Age :</TH>
	<TH>Sex :</TH>
</THEAD>
<TR>
	<TD><SPAN DATAFLD="name"></SPAN></TD>
	<TD><SPAN DATAFLD="age"></SPAN></TD>
	<TD><SPAN DATAFLD="sex"></SPAN></TD>
</TR>
</TABLE>

Tabular Data Control and JavaScript

The tabular data control exposes a few properties and methods for any client-side language like JavaScript to manipulate. Some of the important ones are:

In the below example, we'll use JavaScript to reference a TDC's data file, and display its 2nd row:

Data3.txt:

name|age
~Premshree Pillai~|~19~
~Bill Gates~|~18~

Corresponding HTML page:

<OBJECT ID="data3" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
	<PARAM NAME="DataURL" VALUE="data3.txt">
	<PARAM NAME="UseHeader" VALUE="TRUE">
	<PARAM NAME="TextQualifier" VALUE="~">
	<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

<SCRIPT LANGUAGE="JavaScript">
var dataSet=data3.recordset; //Get the complete data record set
dataSet.moveNext(); //Go to next data row
</SCRIPT>

<SPAN DATASRC="#data3" DATAFLD="name"></SPAN>
<SPAN DATASRC="#data3" DATAFLD="age"></SPAN>

-TDC JavaScript Ticker

By combining Tabular Data Control with JavaScript, the below example creates a ticker that retrieves its content from a txt file, and rotates/displays them:

tickerdata.txt:

message#messageURL
JavaScriptKit.com tutorials and scripts#http://www.javascriptkit.com
Freewarejava.com Java applets#http://www.freewarejava.com
CodingForums.com help forum#http://www.codingforums.com
Premshree's Site#http://premshree.resource-locator.com

<script type="text/javascript">

//Note- Below example by JavaScriptKit.com
	
function tdcticker(){
	tickerSet.MoveNext();
	if (tickerSet.EOF) //if end of data's file
		tickerSet.MoveFirst()
	setTimeout("tdcticker()",3000); 
}

function init(){
	tickerSet=ticker.recordset
	tickerSet.moveFirst()
	setTimeout("tdcticker()",3000)
}

</script>

<object id="ticker" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
	<param name="DataURL" value="tickerdata.txt">
	<param name="UseHeader" value="TRUE">
	<param name="FieldDelim" value="#">
</object>

<a href="" datasrc="#ticker" datafld="messageURL"
style="width:260px; border:1px solid black; background-color:">
	<span id="tickerDiv" datasrc="#ticker" datafld="message"></span>
</a>

<script type="text/javascript">
if (document.all)
	ticker.ondatasetcomplete=init
</script>

As you can see, Tabular Data Control is a great way to include simple database functionality on your site where a server-side db is not possible

setTimeout function

setTimeout, a method of the window object, basically delays the execution of a function or statement until the specified time has passed. The basic syntax of this function is:

setTimeout("expression", delaytime)

"expression" is the function/statement you want delayed, and delaytime is the delay time, in milliseconds.

For example, this will output "Three seconds have gone!" after 3 seconds.

document.three.hi.value=""
//simply clears the text box
function talk()
{
setTimeout("document.three.hi.value='Three seconds have gone!'",3000)
}

<form name="three">
<input type="text" size="28">
<input type="button" value="Start" onClick="talk()">
</form>

Let's do a example that, by placing the setTimeout in a special position, continuously writes to a box, incrementally itself every second.

var c=0
document.go.timer.value=""
function count()
{
document.go.timer.value=c
c=c+1
setTimeout("count()",1000)
}

<form name="go">
<input type="text" name="timer" size="12">
<input type="button" value="Start" onClick="count()">
</form>

• A very important point is that the setTimeout method executes count() after one second, but look at the place where setTimeout is placed-inside count()! This will execute everything within function count(), including setTimeout itself, every one second. Basically, this forces the function to loop back and start at the beginning each time it encounters this method. If you don't get it, study it a little harder-you'll see it!

• The above function will run forever, until you reload or leave. This is exactly the function we need to create a clock, since we need a function that will continuously update itself. This function is so important, because whenever you write something that needs continuous refreshment, all you have to do is put a setTimeout function inside another function and call it. Now, a little thought will tell us that we can control this function, if we want to, so that it does not run forever- namely, by putting it in an if-else-statement. Note that to get "1" second, we used "1000". (1 millisecond*1000) equals 1 second.

Using setTimeout, we can implement a live clock. Ok, now that we have all the tools, lets do an example of that:

And, like always, here's the complete date object:

Lets attempt to make a live clock then, shall we?

We will now attempt to show an example of each of the two concepts we had learned in the last section-using the date object, and dynamically writing out html.

-Tutorial introduction
-The date object
-Dynamically writing out html codes
-The setTimeout function
-Adding a live clock with the help of a form
-Example: To watermark or not to watermark?