HistoryManager - The Ajax Back-Button (v1.0)
HistoryManager is an unobtrusive MooTools plugin to allow history handling for multiple modules. It solves the typical “Back-Button” and “Ajax Bookmarks” problems for accessible browsing and a better usability in Rich Internet applications.
Showcases
- Multiple Widgets Complex example with multiple widgets and implementations.
Compatibility
Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)
Features
- Allow users to bookmark your ajaxified application in the current state
- Forward/backward history browsing for your Accordion and every other
- Save states of One-page-applications over sessions
- Change easily default options and customize the behaviour with Events
More specific: Modules can be everything from classes to closures. The modules register callbacks to allow the communication between the HistoryManager and the modules. The callbacks are fired when the history changes (from back/forward navigation or entering the site with a given location hash) or when a module confirms an internal state change. The script checks periodically for a change in the location hash, so the user can also change the hash manually. For IE an hidden iframe (with blank.html as src, which must exist!) is injected into the document body. For safari an hidden form is injected.
Getting started
Basic workflow
HistoryManager.initialize();
You can change the default options here, if you don’t call it yourself, initialize is called when the first module is registered.
Inside your class (taken from Pagination class in the example), this looks complicated the first time but is easy to use:
this.history = HistoryManager.register( // arguments are (key, defaults, onMatch, onGenerate, regexp, options) // the unique key of the registered module this.historyKey, // Array with default values, here index 0 is the current page index [1], // onMatch, callback when the state changed function(values) { this.to(parseInt(values[0])); }.bind(this), // onGenerate, callback that returns the string for the hash function(values) { return [this.historyKey, '(', values[0], ')'].join(''); }.bind(this), // RegExp for the hash value, works this.historyKey + '\\((\\d+)\\)');
this.history is now an object with these functions: setValues, setValue, generate and unregister. There are also default values for default, onMatch, onGenerate and the regexp argument, take a look in the documented source.
This is called when the state in the class changed:
this.history.setValue(0, this.page); // is the same thing as HistoryManager.setValue(this.historyKey, 0, this.page); // or, using setValues HistoryManager.setValues(this.historyKey, [0]);
Index 0 is the page index, setValue updates now the location hash with the new state.
After registering all modules, call:
HistoryManager.start();
This starts the periodical check for the location hash and calls the affected modules when the location hash already contains state information.
For more information take a look at the example code and the documented source!
Sites using it
- JonDesign’s SmoothGallery - Included in Version 1.2
Requirements
MooTools JavaScript Framework 1.1
Download MooTools 1.11 with at least these modules:
- Class.Extras
- Hash
- Element
- Window.DomReady (facultative)
Download
Changelog
- 1.0 rc2 (2007-05-31)
- FIX: Added check for undefined modules in setValue/setValues
- CHG: Cleaned up code a little bit
- 1.0 rc1 (2007-05-23)
-Initial official Release (still experimental!)
License
All files are © 2008-2009 by Harald Kirschner and available under the MIT License.
Contact & Discussion
For asking questions, requesting features, filing bugs or contributing other thoughts on this project use the support forum below. Before posting a new question, read through the documentation and the contributed notes for an answer. For problem reports make sure to add enough details like browser, version and a link or the relevant code.
You can contact me for non-support related notes.
Professional Support
I am available for hire if you look for professional and swift help. I can come to your rescue for installation, customization or extending the existing source for your needs.
41 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
-
if only it worked with v1.2
-
Hy
My Accordion will not work with the version 1.2.
I tried it also with the modified versions of historymanager.
Could anyone help me?
Thanks -
I updated to mootools 1.2.2 http://gist.github.com/129829
-
Not sure if this works in Safari 3 (mac), but in Safari 4 in fails in a big way. Note to all: I removed the webkit conditionals in getState and setState and that took care of it.
See -- http://www.springfieldnuclear.... -
Also (or more importantly) I made it compatible with IE8.
-
I got your changes, I will continue with safari support. thanks
-
I tested with safari 3.21 and 4 and works fine without the safari code, may be no working with safari 2.0 I will check it out soon.
-
Let me see if I get this right, I can only use a hash that I can match with a regexp ?
Can I use a different hash with every request ?
#example
#another-site
#learning-history-manager
? -
I made a version compatible with 1.2[.1]:
http://lotosdesign.ru/HistoryM...
Works just as the previous one.
Notice: DomReady is needed -
Nice work Ruslan, been waiting for a while for a 1.2 release.
IE didnt work for me until I changed "window.ie" to "Browser.Engine.trident" on lines 205 and 274, not sure if that effects you as well.
Thankyou Ruslan and Harald! -
Hi, thanks to Harald and to Ruslan for the compatible version with mootools 1.2.
it works very fine but i have got a little problem with ie8 RC1(the same problem can be seen with the version 1.1 of mootool) : in fact, the states curl.
for exemple if i do:
state 1 -> state 2 -> state 3
first back send me to state 2 (perfect :-) )
but second back send me to state 3 again
a third back send me to step 2 agin...
if someone could help: i really don't understand why it is doing tha way...
in fact, i tried gmail and it is not working fine with ie8 too...
perhaps the trick does'nt work with this new version of ie :-( -
For the moment, i have in the head of my pages:
<meta content="IE=7" http-equiv="X-UA-Compatible">
and it works fine like that.
perhaps someone could find something better... -
yep ! and example would be wonderful :)
-
It Is possible a little example??
-
Hallo Harald,
deine Scripts sind echt die aller besten. Allerdings hab ich ein Problem mit dem HistoryManager. Das vor und zurück navigieren anhand der Browser-Buttons funktioniert prächtig (also die URL ändert sich in der Adresszeile auch dementsprechend) ... Refreshe ich die Seite jedoch (per Button oder F5) wird zwar der richtige Content zur eigentlichen URL dargestellt.. jedoch ist in der Adresszeile nur ein "#" und nicht "#show(meineSeite)" zusehen ... hast du eine Idee warum er hier die "Parameter" verschluckt?
Danke ... achja nutze den Firefox 2.1 irgendwas. -
any progress on update to v1.2?
thanks!!! -
This is great: I've tried it out and it seems to work great! This is exactly what I've been looking for.
-
Oh... this was meant to be in reply to Clem's Unofficial update thread. (But of course the original HistoryManager is great) I think the logging in thingy doesn't work well if you reply to a post, but then need to login. It seems to post it as a new thread.
-
Great work ! A History Manager for version 1.2 would be greater !
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
my code is
<script src="jscripts/mootools.js"></script> (version 1.2)
function changePage(page,id,parent,type) {
var jsonRequest = new Request.JSON({url: "getData.php?id="+id+"&parentid="+parent+"&type="+type, onComplete: function(json,resText){
$('pleft').set('html','<img src="'+ json.imagelarge + '">');
$('prtcont').set('html',json.description);
$('prbottom').set('html','<img src="'+ json.image + '">');
var strCen= ' <img src="images/node.jpg"> ' + json.name + '
';
for(var i=0;i<json.numchild;i++) <br="" {=""> strCen+= ' <img src="images/node.jpg"> ' + json[i].pc_name + '
';
}
if (json.idback!=-100) {
strCen+= '
<div align="right" style="margin-right:5px;"><img src="images/back.png"></div>
';
}
$('pcenter').set('html',strCen);
}}).send();
}
index
product
news
how can i use back button with your historymanager? </json.numchild;i++)>