3

I don't even know if my project is possible. After looking around for a few hours and reading up on other Stack Overflow questions, my hopes are slowly diminishing, but it will not stop me from asking!

My Project: To create a simple HTML table categorizing our Sales Team phone activity for my superior. Currently I need something to pull data values from a file and use those values inside the table.

My Problem: Can Javascript even do this? I know it reads cookies on the client side computer, but can it read a file in the same directory as the webpage? (If the webpage is on the company server?)

My Progress: I will update as I find more information.

Update: Many of you are curious about how the file is stored. It is a static webpage (table.html) on our fileserver. The text file (data.txt) will be in the same directory.

Improve this question
6
  • Yeah, I read that trying to access a file through Javascript can lead to confusing error codes. Problem is, PHP is not installed on the file server, so I need something that can run client-side. Their computers do not have Python installed, so no cgi there. :( Commented Aug 12, 2013 at 17:16
  • you can only feasibly do this if the data file is public Commented Aug 12, 2013 at 17:16
  • If the file is on the server, you can read its content by using AJAX. It is better to store your data in JSON format and just parse it after getting the content. Commented Aug 12, 2013 at 17:19
  • This may help: stackoverflow.com/questions/1981815/jquery-read-a-text-file Commented Aug 12, 2013 at 17:25
  • I am not familiar with AJAX, but I will look into it. Commented Aug 12, 2013 at 17:28

6 Answers 6

Reset to default
1

I've recently completed a project where i had almost the exact conditions as yourself (the only difference is that users exclusively use IE).

I ended up using JQuery's $.ajax() function, and pulled the data from an XML file.

This solution does require the use of either Microsoft Access or Excel. I used as early as the 2003 version, but later releases work just fine.

My data is held in a table on Access (on Excel i used a list). Once you've created your table in Access; it's honestly as simple as hitting 'Export', saving as XML and then playing around with your 'ajax()' function (http://api.jquery.com/jQuery.ajax/) to manipulate the data which you want to be output, and then CSS/HTML for the layout of your page.

I'd recommend Access as there's less hastle in getting it to export XML in the right manner, though Excel does it just fine with a little more tinkering.

Here's the steps with ms-access:

Create table in access & export as XML

enter image description here

The XML generated will look like:

<?xml version="1.0" encoding="UTF-8"?>
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="Calls.xsd" generated="2013-08-12T19:35:13">
<Calls>
    <CallID>1</CallID>
    <Advisor>Jenna</Advisor>
    <AHT>125</AHT>
    <Wrap>13</Wrap>
    <Idle>6</Idle>
</Calls>
<Calls>
    <CallID>3</CallID>
    <Advisor>Edward</Advisor>
    <AHT>90</AHT>
    <Wrap>2</Wrap>
    <Idle>4</Idle>
</Calls>
<Calls>
    <CallID>2</CallID>
    <Advisor>Matt</Advisor>
    <AHT>246</AHT>
    <Wrap>11</Wrap>
    <Idle>5</Idle>
</Calls>

Example HTML

<table id="doclib">
    <tr><th>Name</th><th>AHT</th><th>Wrap</th><th>Idle</th></tr>
</table>

jQuery:

$(document).ready(function(){
$.ajax({
    type: "GET",
    url: "Calls.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('Calls').each(function(){
            var advisor = $(this).find('Advisor').text(),
                aht = $(this).find('AHT').text(),
                wrap = $(this).find('Wrap').text(),
                idle = $(this).find('Idle').text(),
                td = "<td>",
                tdc = "</td>";
            $('#doclib').append("<tr>" + 
                td + advisor + tdc + td + aht + tdc + td + wrap + tdc + td + idle + tdc + "</tr>")  
            });
        }
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

JavaScript cannot automatically read files due to security reasons.

You have two options:

  • If you can rely on IE being used, you could use some fancy ActiveX stuff.

  • Use a backend which either constantly pushs data to the JS client or provides the data on pull requests.

Improve this answer

2 Comments

"Fancy ActiveX stuff? Sounds fascinating, could you elaborate a little more?
@Jacob-IT My programming experience with ActiveX is very small (actually none). But have a look here: powerobjects.com/blog/2008/09/02/69 That code seems quite fine.
0

This could work if you had a server like build with Node.js, PHP, ...etc.

JavaScript can read files with the Ajax protocol, but this mean that you need a server.

Otherwise your requests will go through the file:// protocol which doesn't support Ajax.

Improve this answer

1 Comment

The table.html file will be uploaded to a "server"..it's actually shared storage. As far as Ajax goes..that's new to me. If you have any helpful links could you comment them? I will go looking.
0

You can try looking into FileReader: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer

I've never personally gotten it to work properly, but it's supposed to be able to allow this sort of thing.

Improve this answer

1 Comment

Thanks, I will look into that..although it looks as though FileReader will have to be installed on the client PC. i don't have those privileges.
0

Try with XMLHttpRequest or ActiveXObject in IE 5 or IE 6.

Here you can find an explanation:

http://www.w3schools.com/xml/xml_http.asp

Or try this example:

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

Improve this answer

1 Comment

My superior uses Firefox exclusively..and he hates IE. So, I have to bend to his likes, you know? Thanks for the answer though!
0

It sounds like you just want to get the contents of a static file from your server; is that right? If that's what you need to do, you're in luck. That's very easy.

load('textTable.txt', function(err, text) {
    buildTable(text);
});

function load(url, callback) {  
    var xhr = new XMLHttpRequest();  

    xhr.onreadystatechange = function() {
        if (xhr.readyState < 4) return;

        if (xhr.status !== 200) {  
            return callback('HTTP Status ' + xhr.status);
        }  

        if (xhr.readyState === 4) {  
            callback(null, xhr.responseText);  
        }             
    };

    xhr.open('GET', url, true);  
    xhr.send('');  
}

If you go with qwest, it'll look something like this:

qwest.get('textTable.txt').success(function(text) {
    buildTable(text);
});

With jQuery:

jQuery.get('textTable.txt', function(text) {
    buildTable(text);
});
Improve this answer

6 Comments

I don't think he has a server, just a static page.
@AwakeZoldiek A static page on the server. as he mentioned.
Thanks for posting the code, but isn't XMLHttpRequest() only available on IE?
@Jacob-IT Nope, it works in all modern browsers. I wouldn't use this too-simple example code in real life. Look at github.com/pyrsmk/qwest. It will handle errors much better and work in all browsers.
@Jacob-IT Is that what you needed to do? Does this work for you?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.