share
Stack OverflowWhat is the best back button jQuery plugin?
[+283] [14] Guichard
[2008-09-22 18:03:34]
[ javascript jquery ajax hashchange ]
[ http://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin ] [DELETED]

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 [1] and the history [2].

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.

You might find this tutorial useful: electricfairground.com/2009/10/01/… - gomezuk
(17) Rather than aiming for the HTML4 hashchange event; there is now the HTML5 History API which super-seeds it. Here is a good reference. - balupton
(18) *supercedes. Sorry, I had to. - Chris Moschini
(4) *supersedes, actually. Sorry ;) - Town
(6) supersede or supercede - vol7ron
@ChrisMoschini but it does not support bookmarking. - KyelJmD
[+130] [2009-05-15 23:09:15] Rostislav

jQuery Address provides strong cross-browser support for browser history and Ajax crawling:


(3) Despite the lack of explanation, this really is a nice plugin. Its interface actually makes sense, unlike some other plugins, and is dead simple to implement. It also actually works with bookmarking, refreshing, and back/forward, unlike (for instance) "history/remote." - adrian
(3) I too have to chime in and vouch for this one, too. Elegant, and impressively well-documented. All I did was change the links to anchors, and attach a single global callback: $.address.change(function(info) { my_click_func(info.path); }); - Luke Dennis
This is (in my opinion) the most robust of the offerings. You can easily port code written for jquery.history to work with this by doing something like: $.address.change(function(c){my_callback_function(c.value);}); - sholsinger
(2) This is far superior to the jQuery history plugin suggested by @schmichael; it doesn't seem to have any of the same bugs, and seems to be more actively maintained. - SpoonMeiser
@alex try asking a new question. - Will
(7) Beware this plugin calls Google Analytics for you. Which will mess up your GA tags, and may duplicate your page views. - arturnt
(4) After poking around the documentation for nearly an hour, i still don't know how to implement a back button. Definitely not enough example usage. - russjman
(1) @russjman $.address.change(...) and $.address.externalChange(...) - Chris Moschini
(1) @arturnt can u please explain? I'm quite worried but I'd like to read more of what you are trying to say. - Pineapple Under the Sea
1
[+50] [2010-02-16 12:10:12] dolzenko

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


(2) It's worth pointing out that there's a great tutorial on using -part of- the BBQ plug-in, by Remy Sharp over at: jqueryfordesigners.com/enabling-the-back-button - David Thomas
@Ricebowl - I might be wrong here but I watched Remy's tut and he starts of using the BBQ plugin, finds he can't tidy up the hash tag so just uses the hashchange event which I don't think requires the BBQ plug-in. I got it to work without the plugin. There's a also good tutorial here msdn.microsoft.com/en-us/scriptjunkie/ff690558.aspx - screenm0nkey
@Nick Lowman, in all honesty, you could well be right. I think I'd watched the tutorial some time before I wrote that comment. Though now I'll have to re-watch, for curiosity's sake... - David Thomas
(1) @Ricebowl - It does the need the plugin - stackoverflow.com/questions/116446/… - screenm0nkey
(3) If you don't need all of the functionality of the BBQ plug-in and just want the hashcahnge event to work on all browsers then he (Ben Alman) has seperated the code into it's onw plugin here benalman.com/projects/jquery-hashchange-plugin - screenm0nkey
I first tried jquery-history (balupton.com/sandbox/jquery-history/demo), got frustrated, switched to jquery-bbq and it worked like a charm. - Matthew Ratzloff
(4) I tried jquery-bbq with jQuery 2.0 and got errors so it seems that it's now too far out of date. - Beau
jquery-bbq seems to use $.browser under the hood, which has been deprecated. - nokturnal
2
[+45] [2010-07-27 10:20:31] balupton

Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4 hashchange functionality. History.js [1] provides cross-browser compatibility and an optional [2] hashchange fallback for HTML4 browsers.

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 How to show Ajax requests in URL? [3]

[1] https://github.com/balupton/history.js
[2] https://github.com/balupton/history.js/wiki/Intelligent-State-Handling
[3] http://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206

(2) +1 - I love this jQuery plugin! - Nathan Osman
Very awesome. Great demo and docs, too! - wesgarrison
(7) Just thought I'd mention that he has replaced that jQuery specfic version with another project here github.com/balupton/history.js instead. It's compatible with more libraries (jQuery, MooTools, and Prototype). - John Munsch
(1) I've tried them all and this one works the best. - kichik
(2) @tada, I couldn't disagree more... Asual jQuery Address doesn't even support the HTML5 History API, making it incredibly difficult to achieve SEO, and it opens you up to the world of hash problems. - balupton
3
[+36] [2010-07-27 10:03:56] aemkei

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

The best answer! I would give +10 if I could. - Andrey Tarantsov
4
[+12] [2008-09-22 20:46:54] schmichael

I'm successfully using history [1] & 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');
}
[1] http://plugins.jquery.com/project/history

What could this filter through? The use of it? - Coughlin
I have several problems using this. It breaks in chrome when the history reaches 50 entries, it breaks in older versions of chrome in a different way, and it doesn't work in IE6 if you have a '?' in a hash you use. Some of these problems are easy to fix, but the plugin doesn't seem to be very well maintained, and support requests are seemingly going unanswered. - SpoonMeiser
(1) @SpoonMeiser, I too have had issues with others, perhaps try this one balupton.com/sandbox/jquery-history/demo - balupton
@balupton, This link is broken. - Brad
5
[+3] [2009-08-27 15:33:54] vvo

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 !


6
[+2] [2009-02-21 13:43:40] Eli
I could not get this to work with jQuery. - Vebjorn Ljosa
7
[+2] [2010-05-12 19:47:02] vjt

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


8
[+1] [2008-12-16 09:32:23] L-G Jonasson

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.


9
[+1] [2010-05-27 03:47:23] Amir
10
[+1] [2011-11-26 10:18:38] Frodik

I miss here this example: http://www.bcherry.net/playground/sanerhtml5history. It 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


11
[0] [2010-07-03 04:16:04] James Murgolo

This worked very well right off - http://flowplayer.org/tools/toolbox/history.html#plugins_tab http://jquerytools.org/documentation/toolbox/history.html. Be aware that it is GPLv3-licensed [1].

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.

[1] http://jquerytools.org/documentation/

12
[0] [2011-11-09 16:37:16] Mr_Nizzle

You can use jQuery Address plugin http://www.asual.com/jquery/address/

There are some examples http://www.asual.com/jquery/address/samples/

And these are specific on Ajax calls:


This is the same recommendation as stackoverflow.com/a/871229/873282 isn't it? - koppor
13
[0] [2013-07-03 23:16:55] kelceyp

There is a urlAnchor plugin available as well. http://plugins.jquery.com/uriAnchor/

This is from the book Single Page Applications (which I've just read). I'm not sure if it's available on Amazon yet but I picked it up from the early release program on Manning.com.

The basic flow of operation if you use this one is that you direct all UI state changes (e.g. JS responding to UI events) to your URL fragment and have a separate hashChange handler for responding to those hashchange events and then make the appropriate UI state change.

This approach enables you to have one code flow for navigating the UI regardless of whether the state changes come from the user navigating the site or from clicking a URL, a bookmark or the back and forward buttons.

I really like the idea of it since you control which states of your application or site are bookmarkable and you only have one code flow to worry about.

I haven't tried it in practice however but it looks like a good approach to me.


14