• About
• API
• jBookmarker and Ajax
• jBookmarker and Flash
• Projects
• Download
• Feedback

jBookmarker and AJAX

This is a very simple example on how to use jBookmarker and AJAX. I'll keep it geeky and simple, a lot of code, no unnecessary long words. Just read the comments and if you have any doubts, contact me.

First of all we'll need a function that will load all the content via AJAX:

loadContent = function( whereFrom ) {
	/* saves the index for the current page in the hash */
	jBookmarker.set( 'selected', whereFrom );
	
	/*  AJAX call (prototype.js) */
	new Ajax.Updater( 'content',
			           'files/' + whereFrom + '.html' );
}

Next, the callback function. This will be called when the page loads to ensure "bookmarkability" (not exactly a word, but you get my drill) and whenever the hash string changes, to allow navigation with the Back and Forward buttons

initApp = function() {
	/* gets the index from the hash */
	var selected = jBookmarker.get( 'selected' );

	/* if no index if defined, switches to the default one*/
	if ( !selected ) {
		selected = 'hello';
	}

	/* loads the content for the selected index */
	loadContent( selected );
}

All we have to do now is adding the listeners:

window.onload = initApp;
jBookmarker.addListener( initApp );

Simple as that. See the results here and download the source code here.