troubleshooting Question

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

Avatar of JS List
JS ListFlag for United States of America asked on
JavaScript
5 Comments3 Solutions169 ViewsLast Modified:
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?
SOLUTION
plusone3055

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 3 Answers and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros