Miscellany menu of tech delights Vulpeculox home reloading... Download complete package
AutoReload for web page developers
Reload changed pages and keep state

What AutoReload does

You're coding a web page and want to see the effect of your changes. Fine, so leave your editor and reload the page by going to the browser and typing Ctrl-R. Now go back to the editor and so on. Wouldn't it be great if your page automatically refreshed as soon as you saved it? I can tell you after having the luxury of staying right in the editor you'll never go back to manually switching tasks.

All you need is need two <script>s and AutoReload.Start(); in 'document ready'.

Also you can

It's so cool to Ctrl-S in the editor and see instant changes appear in browser without missing a beat.

Getting started is easy-peasy

The out-of-the-box option is for the page to reload itself, if changed, by checking once a second.

Out of the box save state feature

There are configuration tweaks you can add to the .Start() method but there is ready-baked functionality for saving state between reloads. Suppose for sake of argument you have a select-box and you want the page to remember that selection across reloads (Some browsers might do it for you but the actual setting of the selection might trigger something else, and the page-load process might set everything back to 'blank') Many pages apply and remove classes to elements and that sort of thing doesn't get saved by a browser on a simple refresh.

Add one or more of the classs AR-saveVal, AR-saveHtml, AR-saveClasses or AR-saveChecked to elements and you're done. (Elements must have an id).
Demo Pick from the select box. When this changes the class of the sample text will be changed. So far so good. A normal Ctrl-R ends up with the colour forced back to 'pick one' (and in my browser, the select box showing another colour. Jings!)

In this demo the Clear history button purges all state (and reloads). See how the select box reverts to 'neutral' to match the text colour.

Sample Text

History: Clear history

<select id=sizeSelect class=AR-saveVal> <option value="" selected>Pick colour</option> <option value=Mauve>Mauve</option> <option value=Purple>Purple</option> <option value=Orange>Orange</option> </select> <span id=sampleText class="AR-saveClasses">Sample Text</span> <span id=history class="AR-saveHtml">History:</span> <span class=button onclick="AutoReload.PurgeState();">Clear history</span>
Bonus The vertical scroll position is remembered so if you're working down the page you don't have to scroll back to where you were.

Multiple files and other goodies

By adding a configuration object to the .Start() call you can tweak the way AutoReload works. Say for example you want to change the interval from the default one second to two then you'd do this: AutoReload.Start({interval:2000});
ParameterTypeUseIf absent
watchedListArray of strings Give the filenames to watch. For example
['index.htm','./style/my.css','./js/my.js']
  • These are relative to the current file or could be fully specified URLs
  • The current file can be referred to as [window.location.href, ...]
  • You can use full URLs http://etc.com/some/page.htm but this will quite likely fail if you try any cross-site shenanigans.
The current file
intervalNumber The number of milliseconds between testing for changes. (This is the time between finishing checking and having another look, so if you have a slow server the actual time between tests will be extended.) 1000ms
latencyIdString This is the id of a DOM element used to display how long since the last reload. This can be a handy check that the page actually has reloaded. (The counter changes quickly for low values then slows down so as to minimise distraction.) Ignored
onLoadState
onSaveState
Function You can replace the default state save/load routines with custom code. Out-of-the-box functionality

API reference

MethodDescription
Start(Optional object)The only required call. See above for configuration parameters. Generally this wants to go at the bottom of the document-ready function.
Handy tipStart() returns the current time to help you check the page really has reloaded. You can console.log this or do something like $('#testBanner').html(AutoReload.Start();) which, by being visible on the page will remind you to remove it at release time.
SaveState()Calls the save state routine immediately. Normally this will be done automatically just before a reload, and only then. If you anticipate doing manual refreshes (where state will not be saved) then add the following code to document ready.
$(window).unload(function(){AutoReload.SaveState();});
PurgeState()Clears all saved state and immediately reloads the page. Use this to return all state to the condition an ordinary user would see. See the demo code above.
Stop()If for some reason you want to inhibit testing for changes.
LoadState()This is done automatically on every page load so there shouldn't be any need to call it.

RememberRemove AutoReload before distribution.

Bits and bobs