AJAX Autosave functionality

antony.trupe picture antony.trupe · May 31, 2009 · Viewed 53.2k times · Source

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

jrista picture jrista · May 31, 2009

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