Auto save

Auto save can be used to save a value from a field, typically a textarea, whenever it is changed by a user, or when it is changed by a script which also triggers the change event. For example, it can be used with the Row reorder component.

Autosave is switched on by adding the class autosave to the field. It is then controlled by options encoded as a JSON string in the data-options attribute of the field.

The current version of auto save has very few options, though it can be expanded to support more options in the future.


What method to use to save the data. The only method currently supported is:

  • execute - execute the context node, passing it the data in the parameter "data".

Additional parameters to pass to the save.

For the execute method, this would often include the action parameter, and so the options would be something like this.

"method": "execute",
"params": {
"action": "save"

A jQuery selector for an element to which status messages should be written. Different status messages are written for Saved, Saving and Retrying. The element will have the class autosave-saved, autosave-saving or autosave-error added.

The status element is optional, but very useful.


A jQuery selector for the textarea. This defaults to the element with the autosave on it, but setting a target allows an autosave to be set up independently of the textarea.

The method will attempt to save the data. If it fails, it will show the user the retrying message and will set the autosave-error class. The save will be reattempted periodically.

If a save is triggered while a save is in progress, an additional save will be scheduled to run after the first save has completed. However, if multiple saves are triggered while the data is being saved, the data will only be saved again once.

The error and resave retry is on an increasing delay with a minimum delay of 5 seconds and a maximum delay of 60 seconds.