How to make a HTML file auto savable? - javascript

I need to create a single html where the person can input text in text fields, then click a button and save the file itself, so he wont lose changes. The idea is similiar to what wysiwyg does to html documents, but I need that to be implemented on the doc itself.
Where do I start from? I can't find anything like that on Google, perhaps I'm searching the wrong therms.
Need something that uses HTML + Javascript, no server side scripting.

JavaScript alone does not have the ability to modify files on your file system. All browsers do this for (good) security reasons. You will not be able to make changes to the html document itself (but according to the comment by Sean below, you might be able to produce a new copy of the document).
You might try using cookies to store the input values (automatically write them and load them when the document opens). There are various jQuery plugins available to aide in reading and writing cookies.
In business or enterprise systems this is usually done with a database, which would require server-side scripting.

I think most of these answers are incorrect. Using the FileSystem API, content is only saved to a sandboxed hidden folder, the user has no control as to where it is saved.
As suggested by Sean Vieira, using TiddlyWiki is a good solution.
However, if you want to customise it, you can make a Flash/JS bridge in which the Flash SWF saves the actual content.

Related

Reading and using data from user files in Javascript (web application), without uploading them

I'd like to have a way for a webpage -which is generated dynamically by my server- to read all the files in a specific user folder, manipulate them using javascript, within the web browser, and using them to show to the user some results (specific correlations between the data, dependent on the context and sometimes some graphs, drawn using these correlations).
Communication with the server about these data is neither required nor desired. Actually, since all the manipulations needed can be done via javascript and the files can be huge, for now I absolutely don't want that their content is uploaded to the server. Therefore there are no security risks (at least none that I can see).
Server side, I'm only interested to save the name of the folder, so that the user (who is registered) doesn't need to select the files one by one or to select them again every time a new page is dynamically created.
For now, the only hopes to find a solution that I have been able to gather are about using the Chrome FileSystem API (but I'd prefer a general solution, not dependent on a specific browser) or creating an extension that the user should install to use this feature when visiting the website (which, for me, is maybe even worse than relying on a specific browser).
So I wonder if there is a way to implement this feature using only pure javascript and HTML5 and using neither extensions nor browser dependent solutions.
Due to security reasons, JavaScript running in the browser should not be used to access the filesystem directly. But definitely you can access it using Node's fs module (but that's on the server side).
Another way is, if you let the user pick files using the <input type="file"> tag then you can use the File API to fetch the contents. But I think that is not what you are looking for.
Recommended reading: https://en.wikipedia.org/wiki/JavaScript#Security

Is there any way to edit a local file through a web page without running server software?

I've a web working on a web page that's basically just a big table of links. I use javascript to read from a text file, parse it, and create a table based on that.
I'd like to be able to have a button on the page to add new a row of links and add them to the text file (or another file type if it's better).
I know you can accomplish this with php, node.js, and others, but all the methods I've found require server software to be running. Is there any way around this? For example, is there a way to use javascript to call a python script, or any other way?
The page is just for personal use, so I'd like to avoid running server software just to use it if possible. I know you can set it to download a text file, and you can save it in the same location, but I'd also like to avoid that.
From the research I've done, it doesn't seem possible, but I just thought I'd ask before I give up. Thanks in advance.
You can only read from files locally in browser with javascript.
This would be a huge security vulnerability if scripts in browsers could write files to your machine.

Accessing html form fields with an external application

I created a command line tool to help expedite HTML form filling. It uses a brute force approach in that it sends TAB keys to a window and writes info from a config file. This is unstable so I want to refactor it to set form fields using javascript.
I've looked into writing a Firefox addon to do this. I was able to hard-code each field id and write to it from a config file. My issue is I need this functionality in IE.
Is there a way an external application (ie cmd line tool) can write to HTML fields using javascript? I've tried recreating the entire html page with form fields filled in Java. I then try to send this to the normal destination using an HTTP POST. I ran into authentication issues because the forms require a log in.
My other idea is looking into web service tricks. It may be unrelated, I have no idea.
Why not try something like Selenium?
It will stop your reliance on hard coding everything as you have pretty much free reign over the DOM.
Correct me if I'm wrong, though.
You can open an CwebBrowser2 in your C++/C# application and use it as an HTML browser and get all the HTML programatically. You can then parse the HTML with a XML parses and call certain Javascript hooks.
The HTTP Post idea still seems best, if you have trouble with authenticating you just need to mimic that part as well or get the session ID (if a given session is enough for you).

Using Celerity to download a file

I'm using Celerity in JRuby to automate the download of some .csv files from certain websites. For one of the websites (LinkShare), I've gotten very close but cannot figure out the last step.
The website pushes the file download using javascript and the 'hidden iframe' method - during regular browsing, when you click the download button, it calls javascript that creates a hidden iframe containing the download content, and the browser picks that up and prompts the user to save the file.
Obviously doesn't work quite the same way in Celerity. I can see the new iframe in jirb after I've clicked the link, but can't call any methods on it, getting errors like:
NoMethodError: undefined method `getDocumentElement' for #<Java::ComGargoylesoftwareHtmlunit::TextPage:0x184e6efc>
Anybody have enough experience with Celerity/Htmlunit/Javascript/Jruby that they can point me in the right direction? I just want to retrieve the download content (the .csv file).
Alternately, does anybody know of a (headless) browser automation tool that would be better suited for the task, if one exists?
The first thing I'd do is check that you're navigating to the frame. A frame (even an iframe) is treated as a completely separate window, and you'll have to navigate there first. Check the Celerity::Frames class.
Failing that, you may want to try a library that controls a browser, rather than emulate it. Libraries that emulate a browser (such as htmlunit and mechanize) have their limits, and you may have found one. For this, I'd recommend using watir/firewatir.
Mechanize may work for you, it's meant to more closely resemble a normal person's usage of a browser, while remaining headless.
http://mechanize.rubyforge.org/
As ehsanul said Mechanize might be a good starting point. You'll need to figure out the URL being accessed to retrieve the file. Also, look for a cookie or session ID identifying your session to the host. Mechanize should capture that and return it as that's part of what it does.

Stylesheets for content?

Forgive my ignorance since this seems like its something I should know by now.
I know I could make a stylesheet that will allow me to make changes in my CSS throughout several pages that use the CSS. I also know that you can make an external javascript file that could contain functions you want to reuse. But lets say I had pure HTML content (lets pretend a bunch of buttons or links) that I wanted replicated on several pages. Is there anything similar to a stylesheet in that regard? This would allow you to update the buttons/links all at once.
Try server-side includes.
The most frequent use of SSI is to include the contents of one or more files into a web page on a web server. For example, a web page containing a daily quote could include the quote by placing the following code into the file of the web page:
You could also use PHP, if your host allows it. Just change the name of the page from .html to .php and reference the header:
<?php include "header.php" ?>
Both of these require you to change the file's extension, so you might also want to use mod_rewrite to let users still access it via the .html name. Again, if your host supports it.
The question isn't that stupid, as there in fact is nothing native in HTML to do this.
If supported by your server, Server Side Includes are your best option. If you have PHP, you can also do a <?php include "footer.html"; ?>
All other server side languages have a similar construct.
Depends... I know Dreamweaver has some rather advanced support for templates. You can delve into the manual of your WYSIWYG HTML editor and get acquainted to how it can help you with repeatable content items. Otherwise, as Simon hinted, you should consider learning some server side technology (scripting language such as PHP is an easy choice), write your repeatable HTML and let the scripts output that whenever and wherever you need. Good luck!
It seems you're not using some server side technology like ASP.NET which has user controls on which you could place those.
An alternative would be to use Server Side Includes like:
<!--#include virtual="header.html"-->
Grz, Kris.
You can try using the CSS content property, but the content is inserted after/before the target. http://www.w3schools.com/Css/pr_gen_content.asp
EDIT
You can also try storing your content in XML documents and using JavaScript to load the XML sheets. Each sheet can store your button content, input content, etc. All you have to do is parse the XML and render the content as HTML elements.
While SSI seems like the best idea I believe, if memory serves me well, that if you're using IIS you're going to have to adjust some settings on the server to work get SSI with the html file extention.
While SimpleCoder's idea doesn't seem like the best idea it is an interesting one. Building on that idea maybe json data instead of xml would be best. I'd play around with this just for the fun of it.
If neither SSI or PHP is available, you could do it with javascript only:
Load the page into a hidden IFRAME, then grab it (with innerHTML)
- and move it to where you need it..
Unless you don't care about SEO, I would advise against using javascript for this purpose.
It's possible, but such a technique could prevent search engines from properly indexing your site.

Categories