Summary: Autosave pages in the background while editing
Version: 20171104
Prerequisites: PmWiki 2.2.x, Drafts, JavaScript
Status: beta
Maintainer: Petko (Original author: EemeliAro)
Users: +2 (View / Edit)
Discussion: AutoSave-Talk
Categories: Editing, GUI
Download: autosave.zipΔ


AutoSave saves pages in the background while editing by periodically sending your PmWiki server an XMLHttpRequest with the updated contents of the page, if they have changed.

To install this recipe

  • Download autosave.zipΔ and unpack it:
    • The file autosave.php in cookbook/ should go to your cookbook directory
    • The files in pub/autosave/ should go to a new directory autosave under your pub directory, or another location that you should define as $AutoSavePubDirUrl
  • add the following line to your configuration file (note that you'll need to have $EnableDrafts = 1; set before this):
  • add the directive (:autosave:) to your edit form, by default located at Site.EditForm


When included, AutoSave will replace the (:autosave:) directive on your edit form to include the required Javascript files, a checkbox for disabling/enabling autosaving, and a text area displaying the current autosave status (eg. "Draft autosaved at 11:36 (2 minutes ago)"). The state of the checkbox, if changed, will be remembered using a cookie.

AutoSave relies on the standard PmWiki draft system to work, so you'll need to have set $EnableDrafts = 1; before including the recipe. With AutoSave, editing a page and leaving it unsaved will therefore leave draft version of the page in PmWiki. As this will generate many more draft versions of pages than usually, a new action to delete a draft version of a page (deldraft) is included. To use, you may add the following button to your edit form as appropriate among the Save/Preview/Cancel buttons:

(:if match -Draft$:)(:input e_deldraftbutton:)(:ifend:)

The conditional surrounding the above will make sure that the button is only shown when editing a draft version of a page.

Including autosave.php is only really required when you're editing a page or deleting a draft; hence you could use instead something like the following in your configuration file:

if (in_array( $action, array('edit','autosave','deldraft') )) include_once("$FarmD/cookbook/autosave.php");

If you already have a part of your configuration that is only executed if ($action=='edit'), you may also need to change that to allow for the new actions included with AutoSave.


The following variables may be set in your configuration file to control the way AutoSave works.

default: $FarmPubDirUrl/autosave
The URL for the directory containing the JavaScript files used by the recipe.
default: 20
The time period in seconds between autosaving the page. The page is only saved if it has changed from the last update.
An array of HTML used to replace (:autosave:), see the source code for its default values and set any that you need to change in your configuration.


AutoSave has not yet been tested in all possible conditions, so its functionality eg. with any Windows browsers is unverified. The Javascript should fail relatively gracefully and simply not do anything on older browsers.

The recipe shares util.js with Attachtable, so you may set the $AutoSavePubDirUrl and $AttachtablePubDirUrl to match if you have all your Javascript files in a common directory. Note that if you're including both recipes at the same time you should set $AutoSaveFmt['util'] = ''; to prevent the file from being included twice.

Note that if you start editing a page with AutoSave enabled, if you've edited the page and it's been autosaved at least once, clicking on any of the edit form buttons will act as if you were editing a previously saved draft version of the page. This means that if you're editing Main.WikiSandbox and click on "Preview", you'll see your edits in the context of Main.WikiSandbox-Draft?.

To force an autosave of the page, click on the checkbox/autosave status twice. This will first disable, then enable autosaving, which will force an update.

AutoSave assumes that all the page information is kept in the edit form as hidden fields, text boxes or textarea elements. Hence it works with and tracks changes in edit form elements intrduced by recipes such as EditAttributes.

Changes in editform are tracked by periodically comparing the current value of each element to its defaultValue, which is updated to match the value when the page is autosaved. This means that if you preview the page your changes from the previous save to the time when you preview it are not saved (until you edit the page some more and AutoSave is triggered again). As a side effect, recipes such as NotSavedWarning should work perfectly well with AutoSave, as they too compare the value to the defaultValue.


Release Notes

See Also

(Attachtable uses the same util.js as AutoSave)

Cookbook /
Attachtable  Actions to rename, delete & restore deleted attachments, as well as an attachlist replacement to use those actions, show file types and list attachment references. (beta)
NotSavedWarning  Warn authors when they move away from a page without saving it; optionally request an edit summary or an author name (beta)
00639  Improve saving of entries (Closed - cookbook recipes)



See discussion at AutoSave-Talk

User notes +2: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.