that's new!
give feedback

Brand New! If you want to add LiveSaver to your MediaWiki installation, download the LiveSaver Extension for MediaWIki, unpack it into the extensions/ directory of your MediaWiki installation and add the following line to your LocalSettings.php file:

require ('extensions/LiveSaver/LiveSaver.php');

……………………❦……………………
Adding LiveSaver to youw own page involves two steps:
  1. Include the JavaScript files
  2. Register the form elements, LiveSaver should monitor

LiveSaver is built on top of prototype and json. To keep it small, I created a miniPrototype.js file that implements all the necessary functionality but leaves out the rest of all that comes with prototype – it saves ~80k. If you are using prototype already, all you need is the InputEventObserver extension. Please note that this is not an official extension of prototype.

These lines are typically needed to enable LiveSaver on your web page: 
<script src="miniPrototype.js" type="text/javascript" charset="utf-8"></script>
<script src="json.js" type="text/javascript" charset="utf-8"></script>
<script src="liveSaver.js" type="text/javascript" charset="utf-8"></script>
<script src="prototypeInputEventObserver.Extension.js" type="text/javascript" charset="utf-8"></script>

liveSaver.js defines a new JavaScript Object LiveSaver. This Object needs to be initialized with a name that is unique among the webpages on your domain and that use LiveSaver. If you don't specify a unique page name, LiveSaver uses the entire URI. 

LiveSaver.init('UniquePageName');

Next, you need to register the form fields you like to have supervised by LiveSaver. You can either supply the id of an element or the JavaScript Object itself. LiveSaver.register('elementId').

All that is left now is the integration into your web application. A basic example is shown below. It uses alert()'s to interact with the user, but any other method is possible and easy to implement. The example is taken from the demo page 

function setUpLiveSaver(reset)
{
  LiveSaver.init('Demo');

  if(reset) {
    LiveSaver.reset('headText');
    LiveSaver.reset('mainText');        
    return;
  }

  LiveSaver.register('headText');
  LiveSaver.register('mainText');

}

setUpLiveSaver(reset) is called by <body onLoad="setUpLiveSaver(false)">. In case your form was submitted successfully and the user's data is safe, you call <body onLoad="setUpLiveSaver(true)">, to force LiveSaver to flush it's cache.

That's it. In the near future, I will add detailed API documentation for the LiveSaver object. Until then, use the source to see what you can tweak (For example the amount of keys that have to be typed before a save operation, in case saving at every character is not feasible for your application).

← Back home

© 2006 Jan Lehnardt • LiveSaver is built on top of prototype. Thank you Sam!