<html>
<head>
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery.cookie.js"></script>
<script>
$(document).ready(function () {
console.log('Start me up!')
//check for draft_title and draft_body
var draftTitle = $.cookie('draftTitle')
var draftBody = $.cookie('draftBody')
console.log('title='+draftTitle)
console.log('body='+draftBody)
if(draftTitle) $("#title").val(draftTitle)
if(draftBody) $("#body").val(draftBody)
//update the cookies every 10 seconds....
window.setInterval('saveDraft()', 5*1000)
//clear cookies on form submission
$("#mainForm").submit(function() {
console.log('clearing cookies...')
$.cookie('draftTitle',null)
$.cookie('draftBody',null)
return true
})
})
function saveDraft() {
console.log('saveDraft')
$.cookie('draftTitle', $("#title").val(), { expires:7})
$.cookie('draftBody', $("#body").val(), { expires:7})
}
</script>
</head>
<body>
<form method="post" id="mainForm">
<table>
<tr>
<td>Title:</td>
<td><input type="text" name="title" id="title"></td>
</tr>
<tr>
<td>Entry:</td>
<td><textarea name="body" id="body" cols="40" rows="10"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Save"></td>
</tr>
</table>
</form>
</body>
</html>
It would be more efficient to change this line:
window.setInterval('saveDraft()', 5*1000)
to this:
window.setInterval(saveDraft, 5*1000)
And then you can move the saveDraft function declaration to be inside your document-ready callback function so that it is not in the global namespace.
]]>
Maybe it would be better to submit the form with ajax and clear the cookies on success rather than whether it succeeds or not?
Am I missing something?
Btw, I like the cookie plugin. I'll have to try that out.
]]>You could remove that code, and clear the cookies server side on successful addition.
]]>The library can be found at http://plugins.jquery.com/project/cookies or directly at http://code.google.com/p/cookies/
Jim
]]>