AJAX Autosave functionality

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

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.

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

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.