I have found two plugins that enable the browser's back button to work across ajax interactions, but I can't determine which is better and why. The two plugins are history_remote and the history .
The history plug in is simpler and seems to provide all the functionality I need, but I'm not sure I understand enough about them to make an intelligent decision. For my application, I need the plugin to allow the back button to work through ajax interactions, and I need to be able to bookmark the page at any point through the interactions.
Which plug in is best in this scenario and why? Are there any other plug ins that I missed that might be better? Are there any limitations to these plugins that I'm missing (do they not work in certain situations etc)? Any information would be greatly appreciated.
Source: Tips4all
jQuery Address provides strong cross-browser support for browser history and Ajax crawling:
ReplyDeletehttp://www.asual.com/jquery/address
http://github.com/asual/jquery-address
I'm really surprised the BBQ plugin by renowned Ben Alman didn't got a mention here http://benalman.com/projects/jquery-bbq-plugin/
ReplyDeleteRight now, in Internet Explorer 8, Firefox 3.6+, and Chrome 5+, you can bind callbacks to the window.onhashchange event and use it without any kind of plugin.
ReplyDeleteBen Alman has created a jQuery plugin that enables very basic bookmarkable #hash history via a cross-browser HTML5 window.onhashchange event.
http://benalman.com/projects/jquery-hashchange-plugin/
Basic usage:
$(function(){
// Bind the event.
$(window).hashchange( function(){
// Alerts every time the hash changes!
alert( location.hash );
})
// Trigger the event (useful on page load).
$(window).hashchange();
});
Supported browsers:
Internet Explorer 8-9
Firefox 2-4
Chrome 5-6
Safari 3.2-5
Opera 9.6-10.60
iPhone 3.1
Android 1.6-2.2
BlackBerry 4.6-5.
Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4 hashchange functionality. History.js provides cross-browser compatibility and an optional hashchange fallback for HTML4 browsers.
ReplyDeletejQuery History is my preferred choice. It can be found here:
http://www.balupton.com/sandbox/jquery-history/demo/
Provide cross browser support, binding to hashes, overloading hashes, all the rest.
There is also a Ajax extension for it, allowing it to easily upgrade your webpage into a proper Ajax application:
http://www.balupton.com/sandbox/jquery-ajaxy/demo/
This is the solution chosen by such sites as http://wbhomes.com.au/ and http://gatesonline.com.au/stage/public/
Overall it is well documented, supported and feature rich. It's also won a bounty question here How to show Ajax requests in URL?
I'm successfully using history & anchors to make the back/forward buttons work on an AJAX page.
ReplyDeleteJust define a function in the global scope to get called for every navigation event:
function nav_event(hash) {
// Some sort of navigation happened, update page
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#some_anchor');
}
This one is new and works on all recent browsers :
ReplyDeletehttp://benalman.com/docs/code/files/javascript/jquery/jquery-ba-url-js.html
have fun !
http://code.google.com/p/reallysimplehistory/
ReplyDeleteThere's a third jQuery plugin which also gives you back/forward button support:
ReplyDeletehttp://www.overset.com/2008/06/18/jquery-history-plugin/
It doesn't require you to alter your hrefs with hash fragments, although it doesn't give you the bookmarking support you requested it might still be worth checking out.
For a complete AJAX Navigation solution, you may want to check out http://github.com/Panmind/jquery-ajax-nav
ReplyDeleteFor completeness of this list, jQueryTools also has one:
ReplyDeletehttp://flowplayer.org/tools/toolbox/history.html
This worked very well right off - http://flowplayer.org/tools/toolbox/history.html#plugins_tab
ReplyDeleteAnd the code is:
<a id="index.cfm?fuseaction=something" href="something">Some Link</a>
<script type="text/javascript">
$(document).ready(function(){
$("a.buttons").history(function(event, hash) {
$('#rightcontent').load($(this).attr('id'));
});
</script>
<div id="rightcontent"></div>
The hash variable always pulls in the href attribute so you need to put the link in some other attribute. I put it in the id attribute.
You can use jQuery Address plugin http://www.asual.com/jquery/address/
ReplyDeleteThere are some examples http://www.asual.com/jquery/address/samples/
And these are specific on Ajax calls:
http://www.asual.com/jquery/address/samples/crawling/ (AJAX Crawling)
http://www.asual.com/jquery/address/samples/state/ (HTML5 state support)
I miss here this example: http://www.bcherry.net/playground/sanerhtml5history.
ReplyDeleteIt is very simple, but works as expected and has great fallback for IE6/IE7.
It uses jquery.pathchange.js plugin, which can be found here: http://www.bcherry.net/static/lib/js/jquery.pathchange.js