Yesterday was the last time I got fed up with loosing my long content editing in eZ Publish. This is an issue that happens to most CMS not only to eZ Publish, some of them have their own autosaving system but eZ Publish is lacking of this very useful feature. I recently heard of a piece of software that could help with this kind of issue, it is called Lazarus. It is a browser add-on that will automatically save your form's content and would restore it if you have a browser crash. It seems to be a very good plugin for who does spend a lot of time with online editors. But one thing that bothers me, this is just personal, is that I don't want another plugin to my browsers, I don't have the need for such a plugin since I would currently only need it for eZ Publish and also what if I was editing on my laptop and it suddenly doesn't work anymore and I want to recover the work on another computer?

So I thought an Ajax powered script could help and started to investigate on possibilities. Some forums are talking about storing the form content to a cookie, that's quite simple to implement but again I wouldn't be able to recover on another computer. The only way would be to autosave back to eZ Publish DB. So in the train home back from work my mind started to think about how to implement that and I realised that shouldn't be too bad, I would just need to extract all the form's field's content and Ajax post it to a module/view that would store the draft for the object being edited. So I started to work on QH AutoSave extension after diner but then realised that this method won't be as simple as I thought. First issue is uploading images, then issue is to parse extra info about the object, complexity of ezpage datatype etc... So I was thinking of cloning and customising some of the kernel feature, but that would be a bit dirty to my taste.

After more thinking and Googleing for info, I had a eureka moment. I should have thought of it earlier, but you just need to post the form as it is to what ever URL the form is supposed to be posted to but in Ajax way without reloading the current page. So the solution is made of 5 lines of Javascript/jQuery!

        qhAutosaveEditForm = $( '#editform' );
        var formMethod = qhAutosaveEditForm.attr('method').toLowerCase();
        var postURL = qhAutosaveEditForm.attr('action');
        var formContent = qhAutosaveEditForm.serialize() + '&StoreButton=Store+draft';
        $[formMethod]( postURL, formContent, function(data) {} );

First get the DOM element for the form itself, then retrieving the method for submitting the form (POST in our case), retrieving the URL of the script receiving the form content, preparing the content of the form prior to submitting it (a little hack here is to add StoreButton=Store+draft so that the form processing script knows that we want to save as a draft and then we just asynchronously submit the form.

The final extension is of course more than 5 lines of code, but all the rest is tweaking the extension and adding some more feature such as autosave notification, styling, eZ Publish configurations etc... and most importantly make it easy to install and use: just import, activate and use, the extension will just dynamically inject the functional code to the page so no need to override any templates.

I hope this simple extension will be useful to some of you eZ Publish editors. If you have any comments or suggestions, please add a comment below.

The current release is QH AutoSave v1.0beta2 you can alternatively see it on eZ Publish's Projects website.