AJAX Autosave functionality

Question

What's the best javascript library, or plugin or extension to a library, that has implemented autosaving functionality?

The specific need is to be able to 'save' a data grid. Think gmail and Google Documents' autosave.

I don't want to reinvent the wheel if its already been invented. I'm looking for an existing implementation of the magical autoSave() function.

Auto-Saving:pushing to server code that saves to persistent storage, usually a DB. The server code framework is outside the scope of this question.

Note that I'm not looking for an Ajax library, but a library/framework a level higher: interacts with the form itself.

daemach introduced an implementation on top of jQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [script host down]. I'm not convinced it meets the lightweight and well engineered criteria though.

Criteria

• stable, lightweight, well engineered
• saves onChange and/or onBlur
• saves no more frequently then a given number of milliseconds
• handles multiple updates happening at the same time
• doesn't save if no change has occurred since last save
• saves to different urls per input class

Conyers

I'm a little confused as to what "autosave" is supposed to do, why would you want to autosave? maybe if I understood what you were trying to accomplish with it, I could find something else thats compatible. – Imperceptible

I've got a datagrid style page that I don't want to act like an html form. For autosave, think gmail and google documents. – Conyers

Answer 1

Autosave should be pretty simple to implement, and you could use one of the major frameworks like jquery or mootools. All you need to do is use window.setTimeout() once your user edits something that should be autosaved, and have that timeout call the javascript frameworks standard AJAX stuff.

For example (with jquery):

var autosaveOn = false;
function myAutosavedTextbox_onTextChanged()
{
    if (!autosaveOn)
    {
        autosaveOn = true;

        $('#myAutosavedTextbox').everyTime("300000", function(){
             $.ajax({
                 type: "POST",
                 url: "autosavecallbackurl",
                 data: "id=1",
                 success: function(msg) {
                     $('#autosavenotify').text(msg);
                 }
             });
        }); //closing tag
    }
}

Tressa

Thanks, however, this is inventing the wheel, which I'm trying not to do. – Conyers

I'm kind of confused. You were looking for a solution that used an existing framework. The above example is fully based on jquery, which is a very rich javascript framework that, in the 18 lines of my example, hides the true complexity of the example above. If that is not what you were looking for...what exactly WERE you looking for? – Tressa

something like the example in my answer. – Conyers

Sticking with the wheel analogy; looks like it just doesn't exist yet. – Conyers

Actually, I guess it does...sometimes its just finding that magical series of terms that make google burp up the right answer. :P Try this: daemach.blogspot.com/2007/03/autosave-jquery-plugin.html – Tressa

Yeah, I saw his code. Is it actually well implemented? He doesn't sound very confident of it. – Conyers

The downside is his still makes you write the ajax code yourself(even if its easy, you've got to write it yourself). – Conyers

and the host to daemach's js keeps going down. – Conyers

It seems to be up still. I think the poor guy has sold himself pretty short. This seems pretty damn simple and elegant to me: $("yourFormInputs").autoSave( Function, Map ); I say give it a try...if it meets your needs, problem solved! :) I plan to use it myself, as it wraps up my 18 lines of code quite nicely and compactly, and looks well written. – Tressa

This example does not implement all criterias like not save if not changed etc. but this example gives good idea how to implement autosave. Also if you have form you can save form on input blur. – Satiable

>inventing the wheel kek – Typography

Unfortunately in daemach's blog article, the link to the script now redirects to a fake anti-virus page. – Incongruous

Answer 2

I know that this question is old, but I would like to include a code that I like the most. I found it here: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Here is the code:

var $status = $('#status'),
    $commentBox = $('#commentBox'),
    timeoutId;

$commentBox.keypress(function () { // or keyup to detect backspaces
    $status.attr('class', 'pending').text('changes pending');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr('class', 'saved').text('changes saved');
    }, 750);
});

It saves after the user stops writing for more than 750 milliseconds.

It also has a status letting the user know that the changes have been saved or not

Gibe

I like this one as well, works nicely, good article too. Only thing I changed was keypress into keyup. This ensures that backspaces are also detected... – Undertrick

Answer 3

You could save on a set time, by using timeout, but, a better method may be to just have some sort of onchange event handler, so that when data is changed, if you haven't saved within a set amount of time, then save, but, don't save on every keystroke.

So, you look to see when you last saved, before calling the ajax function.

This will enable you to save only when needed, but at a predetermined rate. So, if you want to save every 5 minutes, then regardless of what changes were made, if a change was made within that 5 minute window you save.

Making the ajax call is trivial, but jQuery can simplify it. Unfortunately, to get what you want, from what I have seen, you will need to just implement your own functionality. It is difficult to do in a general way as different people may want to save if only certain fields are changed. So, just because I click on a select box may not lead to the save function, but changing something in a text box may.

Perlman

This answer is on the right path, even though it boils down to 'not that I know of'. – Conyers

Answer 4

For simple autosave of form fields in cookies I use this great plugin http://rikrikrik.com/jquery/autosave/ It doesn't send data to the server, but if you don't find anything better, it's easier to upgrade it's funcitonalily than do it from scratch.

Distant

Answer 5

Isn't all you need a timer that fires every x seconds? The callback function will do an AJAX postback to the server of the form with a "autosave=true" field added. Just handle this postback on the server and you are done.

Erbes

Answer 6

synchronize is a jquery plugin that adds functionality to your html page to periodically automatically send user input back to the server. (source code)

JavaScript and HTML sample:

<script>
  $("input").synchronize();
</script>

<input type="text" value="initial_value" 
       class="{url:'/entity.cfc?method=updateDescription',data:{ID1:'1',ID2:'2'}}" />

resulting ajax request after the default delay of 1s:

http://localhost/entity.cfc?method=updateDescription&value=update_value&preVal=initial_value&ID1=1&ID2=2

Conyers

The problem with this is the backend. Forms usually involve a collection of fields being updated once. Is your backend going to handle updating one field at a time? That's a lot of code to write. You are hitting your server a minimum of twice a second. You are exposing details about your implementation by having a "PK" value. Finally pk_attribute is not a valid attribute for an INPUT item. The examples you have been given are simple and small. You want something smaller that just doesn't exist. – Flatus

Think of the form as more of a datagrid(or series of forms) then an actual form. The PK criticism is valid, in part. The page served to the browser is xml with an xsl stylesheet, not straight html. However, it does seem kludgey: I don't know how to solve it elegantly. Still open for other options. – Conyers

Metadata is the answer to pk_attribute not a valid attribute docs.jquery.com/Plugins/Metadata/metadata – Conyers

Answer 7

I would suggest that you use jQuery. The "saving" part still has to be done on the backend, of course, but jQuery makes the submission of AJAX requests a breeze.

If you have an ASP.NET backend, you can simply call a WebMethod and submit the associated string (content of a textbox etc.) at a specified interval:

[WebMethod]
public void AutoSave(String autoSaveContent)
{
 // Save
}

The jQuery request to call this method would be:

$.ajax({  
type: "POST",  
contentType: "application/json; charset=utf-8",  
url: "AutoSaveService.asmx/AutoSave", 
data: "{textBoxToAutosaveText}",  
dataType: "json"
});  

That's all. You can find jQuery at http://jquery.com/ .

Celluloid

Answer 8

If you're looking for simple and lightweight, I think the most lightweight you can get is using JavaScript's built-in setTimeout() function. Use it in combination with your choice of framework for the AJAX, and you're good to go.

function autoSave()
{
  $.get(URL, DATA); // Use any AJAX code here for the actual autosaving. This is lightweight jQuery.
  setTimeout("autoSave()", 60000); // Autosaves every minute.
}
autoSave(); // Initiate the auto-saving.

Panaggio

It's bad practice to use the GET HTTP verb to store data. All GET requests should be idempotent. Use $.post() instead if you decide to use this solution. – Field