Avatar of JS List
JS List
Flag for United States of America

asked on 

Need HTML page that Retrieves Data from CSV and Displays in a table with NO Server Interaction

Hello,

I have to build a web page that the user can click on and it will display several rows of  3 text fields and 1 link field in a table.  The data is a csv file in the same folder.

Here's the catch the web page will be sitting in the users laptop and no connection to the internet or a server.  The links are to documents in the same folder.

Thought I could do this with JavaScript - and actually got the file read in.  But can't figure out how to display it in a table.  Plus I don't want the user to select the file.

Code below.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
 <script language="javascript" type="text/javascript">
  function onloadpage() {
         document.formname.reset()
      }
</script>
          
   <title>AgDocsJS</title>
  </head>
 <body onload="onloadpage();">
 
<form id="formname" name="formname" method="post" action="" >

<input type="file" name="file" id="file" accept=".csv">

</form>

<script language="javascript" type="text/javascript">
    document.getElementById('file').onchange = function () {
        alert('here3');
        var file = this.files[0];

        var reader = new FileReader();
        reader.onload = function (progressEvent) {
            // Entire file
            console.log(this.result);
            //document.writeln(this.result);
            // By lines
            var lines = this.result.split('\n');
            for (var line = 0; line < lines.length; line++) {
                console.log(lines[line]);
                document.write('"<br>"');
                document.writeln(lines[line]);

            }
        };
        reader.readAsText(file);

    };
</script>
</body>
 </html>



 Then saw Tabular Data Control in IE.  Thought maybe this would work.  It's an Active X that comes with IE.  It's ok if the user has to click on using the Active X item.  But the code doesn't work.  Code below.
http://www.sitepoint.com/control-internet-explorer/
https://msdn.microsoft.com/en-us/library/ms531386(v=vs.85).aspx


Tabular Data Control Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
<script language="javascript" type="text/javascript">
     var dataSet = data1.recordset;
     dataSet.moveNext();  
</script>  
 </head>
 
 <body>
 <object id="data1" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="dsotemplates" width="0" height="0">
<param name="DataURL" value="Templates.txt">
<param name="UseHeader" value="TRUE">
<param name="FieldDelim" value=",">
</object>

<table border="1" cellspacing="0" cellpadding="0" datasrc="#data1">

<thead>
<tr style="background-color: #E7EFF7;"><th width="10%" class="textBold thinBorder spacerRow30" valign="top" align="center">Category</th>
<th width="15%" class="textBold thinBorder" valign="top" align="center">Type</th>
<th width="34%" class="textBold thinBorder" valign="top" align="center">Description</th>
<th width="34%" class="textBold thinBorder" valign="top" align="center">File</th>
<th width="7%" class="textBold thinBorder" valign="top" align="center">Published</th></tr>
</thead>

<tbody> <tr>
<td><span datafld='category'> </span></td>
<td><span datafld='type'></span></td>
<td><span datafld='description'> </span></td>
<td><span datafld='file'> </span></td>
<td><span datafld='published'> </span></td>
</tbody>

</table>


I'd prefer the Tabular Data Control in IE but not sure if you have to be hooked up to a server.

Using IE 11 and windows 8.1

Any ideas?
JavaScript

Avatar of undefined
Last Comment
JS List

8/22/2022 - Mon