|
|
Reading Text Files on the Client Side with Active X and Javascript
|
| Article by: | Premshree Pillai. (2/10/2003) |
|
| Summary: | This article shows you how to read a text file from a client side active X object. |
|
| Viewed: 39422 times |
Rating (27 votes): |
|
4.9 out of 5 |
|
|
|
Reading Text Files on the Client Side with Active X and Javascript
Introduction :
In web pages, it is possible to create instances
of objects that can be used to perform tasks of varying nature. This is achieved
using 'ActiveX controls' and 'Java Applets'. These objects are inserted into the
web page using the <OBJECT> HTML tag. Each object has a 32-bit unique
identifier that is inserted in the CLASSID attribute of the <OBJECT> tag.
Tabular Data Control :
The "Tabular Data Control" is a
Microsoft ActiveX control built into Microsoft Internet Explorer. Using this
object, it is possible to extract ordered (delimited) contents from an ASCII
(normally we use the .txt extension) file into HTML elements i.e. suppose we
have a text file that contains 3 fields (synonymous to columns in database
systems) and these fields are delimited by a character, then it is possible to
extract the values of these fields into a HTML page.
This object is very
useful if we have relatively small amounts of data and need to update this data
frequently and require client-side scripting. Thus, it can act like a small
database.
The tabular data control is available in Internet Explorer 4
upwards. The only disadvantage of this control is that; it being an ActiveX
control, only Internet Explorer supports it. (Netscape requires a plug-in)
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>
Any object, like applets, has a number of parameters. Parameters of the
object are specified using the <PARAM> tag. The tabular data control has
around 7 parameters. Here, I'll discuss only the more important ones :
- DataURL : The path of the file that contains the data. For eg
"data.txt".
- UseHeader : When set to true, it indicates that we want to use the
field names for referencing a particular field. Normally we always set it to
true. In some applications the field names (header) may not be required. The
default value is false.
- TextQualifier : The character at the beginning and end of a text that
qualifies that text. For eg ~My name is Premshree~. Here the TextQualifier is
'~'.
- FieldDelim : The Field Delimiter is used to distinguish between the
different data fields of the data file. For eg, consider a data file where we
have the fields name, age and sex; then the values for these fields will be
written as *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is
'|'. Here, I have used '*' as the text qualifier.
Thus, the
complete initialization will look as follows : <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>
The parameter names are not case sensitive.
The
TextQualifier and FieldDelim parameters can be any character.
Choose a character that you are less likely to use in your text.
Examples :
In these examples, I will use the text
qualifier as "~" and field delimiter as "|". I use the .txt extension for the
data files. You can use any extension you want.
First, let us consider a
simple example where I store my name and age in a text file data1.txt. Now, I
will display my name and age using the tag. This is how it is done :
Listing 1.0 (data1.txt) name|age
~Premshree Pillai~|~19~
Now, I will extract this data and display it in a web page as follows :
Listing 1.1 (data1.htm) <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>
The output will display : Premshree 19
Note the attributes within
the SPAN tags. DATASRC specifies the data source to use, which is 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.
Note that using the same method as above you can
extract data from a text file into any HTML element; but the above method is
inefficient in that if our data file contains more than 1 entry, we will not be
able to extract all the values directly.
In these cases we use the
tag. The TABLE tag has a special property as we will see in the following
example.
Consider a simple example where we store the name, age and sex
of 3 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 :
Listing 2.0 (data2.txt) name|age|sex
~Premshree Pillai~|~19~|~male~
~Vinod~|~18~|~male~
~Usha~|~19~|~female~
Now, we can extract all of the above data and display the same in a
tabular form as follows :
Listing 2.1 (data2.htm) <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>
The output will look like this :
| Name : |
Age : |
Sex : |
| Premshree Pillai |
19 |
male |
| Vinod |
18 |
male |
| Usha |
19 |
female |
Thus, we have
specified the three data fields (DATAFLD) in 3 different tags (columns) only
once. The web page automatically displays all the 3 sets of values (3 rows).
Thus, we can add as much content as we want to the text file and we need not
make any modifications to the HTML code that extracts these values.
Tabular Data Control and JavaScript :
It is possible to
manipulate the tabular data control object using JavaScript. In the first
example that we saw, the 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), then that can be
done as follows : <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>
<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 self
explanatory : Initially we store the entire data of the data file into 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 if we have 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 ticks 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)
Listing 3.0 (tickerData.txt) ~message~|~messageURL~
~Free JavaScripts by Premshree Pillai~|~http://premshree.resource-locator.com/javascripts.htm~
~Free PerlScripts by Premshree Pillai~|~http://premshree.resource-locator.com/perl.htm~
~My Journal~|~http://premshree.resource-locator.com/j~
Listing 3.1 (tickerStyle.css) .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}
Listing 3.2 (ticker.htm) <html>
<head>
<title>JavaScript Ticker (using Tabular Data Control)</title>
<link rel="stylesheet" href="tickerStyle.css">
<!-- BEGIN JAVASCRIPT TICKER USING TABULAR DATA CONTROL -->
<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>
The script is self explanatory.
You can download all the examples
given in this article from :
http://premshree.resource-locator.com/articles/tdc_examples.zip.
I hope you have found this article useful. You can mail me your
comments/suggestions etc.
© 2002 Premshree Pillai.
Website: http://premshree.resource-locator.com
|
|
View highlighted Comments
 User Comments on 'Reading Text Files on the Client Side with Active X and Javascript'
|
Posted by :
 Archive Import (Mario Flores) at 20:33 on Saturday, March 08, 2003
|
Wow very impresed with your Post...only one question,how can you give the results of the values of the TXT file to one variable..example
THIS VARIABLE X =
<TD><SPAN DATAFLD="name"></SPAN></TD>
??
Can you helme please
Atte MArio FLores
sistec_de_juarez@hotmail.com
| |
|
Posted by :
Archive Import (Noel) at 10:17 on Monday, March 10, 2003
|
Very good documentation. But how can I say that all data in each line in the txt file should appear in different html files.
| |
|
Posted by :
Archive Import (Colin Reay BA PGD) at 10:05 on Thursday, March 13, 2003
|
Excellent help - Thanks (cleared up one or two grey areas.)
Can I assume, (because I cannot find any reference to this topic), that it is not possible to alter the content of the DATASRC (*.txt) file using javascript.
support@solway-firth.info
| |
|
Posted by :
Archive Import (Michael) at 14:10 on Thursday, April 03, 2003
|
Hi This helps a lot, but I need to access the information in javascript and get them in variables.
Cheers
Mike
| |
|
Posted by :
Archive Import (Gabor) at 13:29 on Monday, June 02, 2003
|
Excellent article! I 've found everything in one place that I needed regarding this topic.
Cheers,
Gabor
p.s.:Isn't there a way to alter a txt file from from the client-side?
| |
|
|
|
Posted by :
Archive Import (Lord Phil) at 19:19 on Wednesday, July 23, 2003
|
Looks fine but I try to figure out how add data to the text file with some user values.
Once done, I'd ask if its possible to use the recordset to sort the data
Thanks
| |
|
Posted by :
Archive Import (Aaron) at 00:59 on Friday, August 22, 2003
|
Just wondering if there is a way to actually use the datasrc in a form field??
| |
Posted by :
 hannesdl at 05:31 on Monday, October 13, 2003
|
This is a great peace of art WOW - yeah, I would also like to know how store the value that u retrieve into a variable or as the value to a field?
| |
|
Posted by :
melilot at 05:24 on Wednesday, April 07, 2004
|
It result a great help but... I also want to know how can you asign the results of the values read to a variable! That's very important to me
Thanks
MARIA
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| |
