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.
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.
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:
<title>D&D Adventure Notes</title>
var notesCode = getCode();
var notesPath = getFullPath();
var notesArea = document.getElementById("Display_Area");
var originalNote = "";
var note_file = location.href.split("?").split("="); //gets the value passed with the variable.
var note_loc = "/Notes/";
note_loc += note_file + ".txt"; //Assumes the file is a .txt file!!!
var datafile = window.location.href.substring(0, window.location.href.lastIndexOf("/"));
datafile = datafile.substring(0, datafile.lastIndexOf("/"));
datafile += notesCode;
<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>
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. 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.
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!