What is the best back button jQuery plugin?

Question

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.

Answer 1

I'm successfully using history & anchors to make the back/forward buttons work on an AJAX page.

Just 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');
}

Answer 2

There's a third jQuery plugin which also gives you back/forward button support: http://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.

Answer 3

Hello first of all forgiveness for my bad English. I tried both and saw that fails in IE with internal links in a page loaded with ajax and this method. Someone know how to solve.

Answer 4

http://code.google.com/p/reallysimplehistory/

Answer 5

http://www.asual.com/jquery/address/

Answer 6

http://www.overset.com/2008/06/18/jquery-history-plugin/

have a bug..it sometimes call the ajax file twice

Answer 7

This one is new and works on all recent browsers :

http://benalman.com/docs/code/files/javascript/jquery/jquery-ba-url-js.html

have fun !

Answer 8

You might find this tutorial useful:

restoring-conventional-page-navigation-to-your-javascript-application-with-jquery-history-plugin

Answer 9

I'm really surprised the BBQ plugin by renowned Ben Alman didn't got a mention here http://benalman.com/projects/jquery-bbq-plugin/

Answer 10

For a complete AJAX Navigation solution, you may want to check out http://github.com/Panmind/jquery-ajax-nav

Answer 11

For completeness of this list, jQueryTools also has one: http://flowplayer.org/tools/toolbox/history.html

Answer 12

This worked very well right off - http://flowplayer.org/tools/toolbox/history.html#plugins_tab

And 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.

Answer 13

Right 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.

Ben 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 6-8
• 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.

Answer 14

jQuery 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 http://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206