Reading (Loading) and Writing (Saving) Small Text Files

JavaScript
1

I’ve been frustrated by this for about a month now. I’m now at the point of either getting help or abandoning the project altogether. :frowning:

I’ve got a personal project I’ve been working on…it is a Dungeons and Dragons adventure that has been transcribed onto the computer. This is done in the Firefox browser (basically it’s a webpage), but it does not access the Internet. (I guess that translates to either “Everything is handled locally” or “Everything is handled server-side”, but I’m not sure which is correct.)

The page in question has entries for every area of the adventure. What I want to do is this:

  • each entry will contain a “Notes” button. When clicked, this button opens a new page in another frame
  • the new page, upon opening reads a small “Notes” text file from the hard drive.
  • the new page contains a textarea where the contents of the notes file are displayed.
  • the user is able to change the text in the text area
  • there is a “Save Changes” button on the new page, which will save the contents of the textarea to the same textfile that was opened.

My biggest problems so far are:

  • the code to open and read the file… the only way I seem to be able to do it so far is with an <input type=“file”…> tag, but I don’t want the user to choose which file to load in…the file will be known when the button is clicked
  • the code to put the file’s contents into the textarea upon the window opening…so far, it seems I have to actually DO something on the new page to force the data into the textarea (like a button with a: onclick=“textareaname.value=filecontents”), which is unacceptable.
  • the code to save the file… I haven’t even attempted this yet, as just reading the file has caused so many headaches.

I need this to work in Firefox, using HTML and/or Javascript (without PHP or PERL…the code needs to be portable, and I can’t always guarantee the computer it goes to will be set up as a server).

Here is the code I have so far:

Opening the new page, using the area “Village_19” as an example:

Button: <button type=“button” id=“Village_19” onclick=“top.notesWindow(this.id)”>Notes for Area 19</button>

  • runs the function “notesWindow”, passing it the id of the button clicked (in this case, Village_19).
  • the notesWindow function is a single line at the moment:

notesWindow = window.open(“…/Utility/Note_Display.html?loc=” + locCode, “NotesWIndow”, “width=500,height=500”)

  • using a popup window instead of a frame at the moment, for testing purposes
  • opens the page “Note_Display.html” passing it the code “Village_19” in the variable “loc”.

Here is the code I have so far for the new page that is meant to display the notes:

<html>
<head>
<title>D&D Adventure Notes</title>
<script language=“javascript” type=“text/javascript”>

var notesCode = getCode();
var notesPath = getFullPath();
var notesArea = document.getElementById(“Display_Area”);
var originalNote = “”;

function getCode()
{
var note_file = location.href.split(“?”)[1].split(“=”)[1]; //gets the value passed with the variable.
var note_loc = “/Notes/”;

note_loc += note_file + ".txt";	//Assumes the file is a .txt file!!!

return(note_loc);

}

function getFullPath()
{
var datafile = window.location.href.substring(0, window.location.href.lastIndexOf(“/”));
datafile = datafile.substring(0, datafile.lastIndexOf(“/”));
datafile += notesCode;

return datafile;

}

</script>
</head>
<body>

<button type=“button” id=“saveNotes” onClick=“saveNewNotes(notesArea.value)”>Save Notes</button><br />
<textarea name=“Display_Area” rows=“10” cols=“50”>Notes from file go here.</textarea>

</body>
</html>

Testing so far seems to indicate that the getCode() and getFullPath() are working as intended.

As stated, what I need now is the code to:

  • read the file
  • display the contents in the textarea
  • save the contents to the same file when the Save Notes button is clicked

I really have no idea where to go from here, as everything I’ve found online has been of little to no help. :frowning: I’ve seen a lot of older pages that say reading and writing this way isn’t possible, but the HTML 5 specs I’ve found seem to indicate that it IS possible. It just doesn’t seem easy. :frowning:

And, it must work in Firefox.

I realize I am asking for a lot, but I’m frustrated beyond all reason at this point. Any and all help greatly appreciated!

Taffer

2

With just regular old JavaScript this isn’t possible - you cannot access files from the browser.

There is a new file access API which lets you access file people are about to upload, but AFAIK that still won’t let you save files locally.

What you need is LocalStorage: this is a sort of client-side database that’ll let you store data and retrieve it again later. There is also support for this in pretty much every other browser (not sure about IE though). More info for the Firefox implementation here: https://developer.mozilla.org/en/DOM/Storage

Here’s an jQuery/ MooTools plugin that might interest you: http://www.jstorage.info/

3

If you know it will be Windows OS only, AFAIK you could use ActiveX (this is a really old script, but it did work last I used it, you might be able to tweak it to suit your needs)

.....
function WriteDemo() {
   var theText;
   theText = document.myForm.textArea.value;
   var fso, f;
   var ForReading = 1, ForWriting = 2;
   fso = new ActiveXObject("Scripting.FileSystemObject");
   f = fso.OpenTextFile("A:\\\\"+theWord+theNumber+".txt", ForWriting, true);
   f.Write(theText);
   f.Close();
}
function getFile() {
var leadin = "A:\\\\";
var firstpart = document.linkBox.month.value;
var nextpart = document.linkBox.day.value;
var lastpart = ".txt";
location.href = leadin + firstpart + nextpart + lastpart;
}
function storeValue() {
   var lastSite;
   lastSite = document.remember.lastsite.value;
   var xyz, j;
   var ForReading = 1, ForWriting = 2;
   xyz = new ActiveXObject("Scripting.FileSystemObject");
   j = xyz.OpenTextFile("A:\\\\LastSite.txt", ForWriting, true);
   j.Write(lastSite);
   j.Close();
}
function getValue() {
location.href = "A:\\\\LastSite.txt";
}
4

(please note that ActiveX is IE only)

5

Thank you for the links. I’ve taken a look at them (and followed a few links from them as well!) but unfortunately, I can’t find anything that quite fits my needs there.

The project needs to be portable. That is, I copy from my computer to one of several other computers for use elsewhere. This means the notes files have to be kept in a specific place. I’ve found nothing in those links that let’s me specify that place. :frowning:

Also, I don’t know if JQuery (or anything else for that matter) will be on the computer I’ll be using. :frowning:

I was led to believe that the new HTML 5 implementation was the answer to my problem, but it seems perhaps I was misled.

Thank you for your time and efforts on my behalf.

Taffer

6

Unfortunately, you won’t be able to do that, localStorage is just that: local. This means the browser saves it somewhere, but I have no idea where that location is.

To be honest, I think you may need to rethink your strategy here, as what you’r planning to do is going to be difficult unless you get something built in Java or Flash to access local files. HTML and Javascript won’t help much here…

7

@Immerse; Thanks for correcting me. For some reason I was thinking ActiveX was Windows only but is indeed IE only as well.

I think Firefox’s local storage is in about:config at least that’s where GM vars go