AJAX Autosave

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://ideamill.synaptrixgroup.com/?p=3. 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

Updates

I've stabilized a solution. See my answer below for links.

Answer 1

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 2

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.

Answer 3

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

Answer 4

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 5

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