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

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
    }
}

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

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.

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.

Answer 5

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/ .

Answer 6

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.

Answer 7

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

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.