I'm trying to make a web app that will read in a server-side CSV file and display it in a neat, browsable format. The catch is that I want to do it in naked JS/CSS3/HTML5. Is there any way to read and write server-side files with naked JS/CSS3/HTML5? I obviously want this to be OS/browser independent.
What I've tried
I have tried implementing some code I found online (a few sites reference it). Below is what I tried while testing: (I just want the test to show the contents of the webpage, itself, in the webpage)
scriptTest.htm:
<html>
<head>
<script type="text/javascript" src="readIt.JS"></script>
</head>
<body>
<button onclick="return readIt();">Show the code of the page</button>
<div id="readItOutput"></div>
</body>
</html>
readIt.JS:
function readIt()
{
file = fopen(getScriptPath("scriptTest.htm"), 0);
file_length = flength(file);
content = fread(file, file_length);
document.getElementById("readIt").innerText = content;
}
However, whenever I run it, under Opera and Chrome, it throws the following:
Opera:
Uncaught exception: ReferenceError: Undefined variable: fopen
Error thrown at line 3, column 1 in readIt() in .JS:
file = fopen(getScriptPath("scriptTest.htm"), 0);
called from line 1, column 0 in <anonymous function>(event) in .htm:
return readIt();
Chrome:
Uncaught ReferenceError: getScriptPath is not defined
readItreadIt.JS:3
(anonymous function)scripttest.htm:6
onclick
I'm trying to make a web app that will read in a server-side CSV file and display it in a neat, browsable format. The catch is that I want to do it in naked JS/CSS3/HTML5. Is there any way to read and write server-side files with naked JS/CSS3/HTML5? I obviously want this to be OS/browser independent.
What I've tried
I have tried implementing some code I found online (a few sites reference it). Below is what I tried while testing: (I just want the test to show the contents of the webpage, itself, in the webpage)
scriptTest.htm:
<html>
<head>
<script type="text/javascript" src="readIt.JS"></script>
</head>
<body>
<button onclick="return readIt();">Show the code of the page</button>
<div id="readItOutput"></div>
</body>
</html>
readIt.JS:
function readIt()
{
file = fopen(getScriptPath("scriptTest.htm"), 0);
file_length = flength(file);
content = fread(file, file_length);
document.getElementById("readIt").innerText = content;
}
However, whenever I run it, under Opera and Chrome, it throws the following:
Opera:
Uncaught exception: ReferenceError: Undefined variable: fopen
Error thrown at line 3, column 1 in readIt() in http://s.supuhstar.operaunite./s/content/JS/readIt.JS:
file = fopen(getScriptPath("scriptTest.htm"), 0);
called from line 1, column 0 in <anonymous function>(event) in http://s.supuhstar.operaunite./s/content/JS/scripttest.htm:
return readIt();
Chrome:
Uncaught ReferenceError: getScriptPath is not defined
readItreadIt.JS:3
(anonymous function)scripttest.htm:6
onclick
- 2 Have you considered using XHR ("Ajax") to pull the desired file and then parsing the mas and lines? You can't directly write server files with this method (you'd have to ask a server-side script to do that for you via XHR), but you can "read" a file this way and parse its contents. – Matt Commented Feb 8, 2012 at 4:32
- 1 Matt's absolutely right. You can get the file contents with AJAX and then format however you want. – Kevin Ennis Commented Feb 8, 2012 at 4:42
- @Matt what part of XHR is "naked JS/CSS3/HTML5"? – Ky - Commented Feb 8, 2012 at 6:01
- 2 @Supuhstar Pretty much all of it: developer.mozilla/en/XMLHttpRequest – Matt Commented Feb 8, 2012 at 6:03
2 Answers
Reset to default 2If you want to edit some files from server you need to use XHR object to download file to client side and again use XHR object to send modifed data back to server, also you need some sort of API on you server to send/recieve data.
File writing cannot be done with JS/CSS3/HTML5 alone for security reasons, otherwise people would be able to modify the js in FireBug and write a file. You would need to create an API of some sort using either server-side JS or a language such as PHP to handle the permissions, file names, file locations, etc…
As for reading, your file would have to be publicly accessible, otherwise you'll need it served by a server-side language such as PHP.