Auto-saving has been one of the great features that AJAX has given to us. Ever had a time when you were writing a very long article and suddenly, your browser crashes. Thanks to applications that implement auto-saving, data is less prone from lost due to these cases.
Ever wondered how auto-saving is done? Basically, it is just a simple AJAX script running in the background at set intervals to save the data you are currently working on. Here is a simple tutorial on how to implement auto-saving using jQuery
Before we start, the article assumed the following:
- Basic knowledge of jQuery
- Basic knowledge of PHP
For the articles database, we will only use 4 rows for our table named articles:
- id – this will serve as the primary index for the table; auto-increment
- title – this will contain the title of the article
- content – this will contain the body of the article itself
- timestamp – this will contain the timestamp when the row was last inserted or updated
Let us first start with the form and call it add_article.php for this tutorial. Before we render our form, we must first create a blank instance of a row. The purpose of this is two-fold. One, so that we can generate an article id, and secondly that we cannot really update a non-existent row. There is a more efficient way of implementing this logic without generating a blank row every time, however, for the sake of simplicity and explaining the point of concept for this tutorial, we will skip this part.
add_article.php
//create new article on database
mysql_query("INSERT INTO `articles`(title, content) VALUES('', '')");
$article_id = mysql_insert_id();The next step is making the form. First, we would create a form element that would to save the article to a standard save page. Lets call it save.php.
Remember the article_id generated in making the blank row? Now we must output it as a hidden input for the article_id associated with the article. We would also need an input text field for the title and a text area for the content. Finally we would need a submit button, and a placeholder container for the “Last saved” timestamp.
add_article.php
<form id="article_form" method="post" action="save.php">
Title:<br />
<input type="text" name="title" id="txt_title" /><br />
Content:<br />
<textarea name="content" id="txt_content" ></textarea><br />
<input type="hidden" name="article_id"
value="<?php echo $article_id ?>" />
<input type="submit" value="Save"/><br />
</form>
<div id="timestamp"></div>
Now for our AJAX back end, we must create a script that will perform the update from the AJAX request that came from add_article.php. Let us call this script autosave.php. In return, the script must output the timestamp when the article was last updated
autosave.php
$title = mysql_real_escape_string($_POST['title']);
$content = mysql_real_escape_string($_POST['content']);
$id = (int)$_POST['article_id'];
//save contents to database
mysql_query("UPDATE `articles`
SET title = '$title', content = '$content' WHERE id = '$id'");
//get timestamp
$result = mysql_query("SELECT timestamp FROM `articles`
WHERE id = $id");
$timestamp = mysql_result($result, 0);
//output timestamp
echo 'Last Saved: ', $timestamp;And finally to tie it all up, we must now create the autosave script in jQuery on add_article.php. First of all, in creating our autosave() function, we will need to create a setTimeout loop that will call itself recursively. For this tutorial, the interval between auto-saving is 20 seconds
add_article.php
function autosave()
{
var t = setTimeout("autosave()", 20000);
}And finally, to finish it all up, we must send an AJAX request to our back end autosave.php. Of course, we mustn’t forget to pass the $article_id we generated earlier. Also, auto-saving must only proceed when both title and contents are not empty.
And lastly, when the AJAX request has been successfully processed, we will pass its value to our timestamp container.
add_article.php
function autosave()
{
var t = setTimeout("autosave()", 20000);
var title = $("#txt_title").val();
var content = $("#txt_content").val();
if (title.length > 0 || content.length > 0)
{
$.ajax(
{
type: "POST",
url: "autosave.php",
data: "article_id=" + <?php echo $article_id ?>
+ "&title=" + title + "&content=" + content,
cache: false,
success: function(message)
{
$("#timestamp").empty().append(message);
}
});
}
}Finally, it is just a matter of starting the auto-saving feature when the DOM is ready:
add_article.php
$(document).ready(function(){
autosave();
});
Working demo of the tutorial and the download links can be found below:
View jQuery Auto-save Demo
Download Source Codes
22 Comments 
