jquery.history.js VS jquery-hashchange

Question

See http://balupton.github.io/jquery-history/demo/

I was attracted with jquery.history.js

mean while I found

http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/

I think the second one is just based on JQuery. I mean it don't need any additional plugin than jQuery.

What is special in jquery.history.js? than hash change?.

Which should I use to override my browsers back and forward buttons ?

Answer 1

EDIT - Late 2013

Another hash library called "sammy.js" is popular as well. It has a nice client side routing map. The client side routing structure is used to handle the hashchange events, so that you can use it to provide single-app-like functionality to some of your pages. See https://github.com/quirkey/sammy/wiki/Presentations for a bit of detail.

Also, its hardly necessary to use normal links is done in the examples below. You can use buttons, li's, whatever you want as as ajax responsive links, as long as you can bind to their on click event. The routing parameters you use may be stored in the data attributes of the clicked elements or otherwise somewhere else identifiable through the clicked element, ie. in a javascript dictionary object. After the on-click event fires, then you can then retrieve the necessary route values and use the html5 push state, jquery-bbq-push state, hashbanging, etc.

---

Overview The history.js and jquery-bbq libraries are used to maintain state when you fire ajax or on page events. You use these libraries to store information about the browser history &/or you manipuate the url so that you can use the forward and back buttons on pages for ajax calls, tab changes, image browsing, really anything you want to bind the history log to. Both libraries have somewhat similar APIs for basic usage.

History.js The new history.js library uses the html5 browser standards for pushstate and popstate and falls back on the hashchange approach if the browser doesn't support html5 pushstate. Pushstate allows you to push your url to the browser bar = change the url without reloading the page! The main repository is https://github.com/browserstate/history.js

To use it, you (a) include the script files, (b) bind to the 'statechange' event and (c) handle the statechange event and (d)trigger the statechange event when you wnat - when your user clicks etc.

notes: Whenever the user presses the forwards or backwards button the state change event will fire. Inside the bind method/handler, you will call a method that gets the correponding state. (1) The method/function History.getState() can be used to get data from your server based on the page history you've pushed in. You can store any variables in the State object. usually you want to store a url. (0) You need to populate the History state each time somebody clicks on a (non-page refreshing) link for which you want to track the history.

(0)

   $("#navbar").on("click","li[data-ajax-link='true']", function(e) {
        var url = $(this).data('uri');
        var target = $(this).data('target');
        var title = $(this).data('text');
        History.pushState({ url: url, target: target }, title, url);
    });

(1)

History.Adapter.bind(window, 'statechange', function() {
       updateContent(History.getState());
});

(2)

 var updateContent = function(State) {
        var url = State.data.url;
        var $target = $(State.data.target);
        ajaxPost(url, $target);
  };

BBQ

Ben Alman's library ie. jquery-bbq.js uses hashes to control the browser history. It is fully compliant with older browsers (as hashchange is like an html4 tech).

If you decide to change the default behavior of a link, when you click on a link, (4) you can intercept the link postback, prevent the default action, and call $.bbq.pushstate. This pushstate method pushes the items inside into the url after a hash mark. (5) This changing of the url hash, calls a 'hashchange' event to which you bind. (5 cont'd) on the hashchange event, you get use $.bbq.getState("paramname") to get the lastet paremeter with "paramname" after the hash. This is usefull because the browser will treat the hashes in the normal history. So when sombody clicks forwards or backwards, it loads the previous or next hash state. If you are using this to make your application use ajax heavily, then you would do an ajax postback to get the url that was previously placed into the hash. For another exapmle of how to use this, look at my recent answer to JQuery BBQ: Where to store URLs?

BBQ History Sample Usage

(4)

 $("a[data-custom-ajax-link='true']").click(function (e) {
    var target = $(this).data('target');
    var url = $(this).attr('href');
    $.bbq.pushState({ url: url, target: target });
    e.preventDefault();
});

(5)

$(window).bind("hashchange", function(e) {
    var url = $.bbq.getState("url");
    var $target = $($.bbq.getState("target"));
    var frame = $.bbq.getState("target");


    $.ajax({
        url: url,
        data : null,
        type: "POST",
        beforeSend: function (xhr) { xhr.setRequestHeader('X-Target', frame); },
        success: function (data) {
            $target.html(data);
        }
    });


});

Note that I've just included the basics of how you could use these plugins. You can use these plugins to manage use of the forward and back buttons with tabs, links, or ajax loads.

As far as which one is 'better', its hard to say. History.js will be the better library when it is fully mature in ~.5 years (its still in beta, but its a good bet for the future, note the large number of open issues and branches on its github site). Jquery-bbq is on the other side of the spectrum in that its 3 years old and hasn't been updated for jquery 1.9 compliance. The good news is that they have a very similar implementation and features so its not too bad to switch between either.

History.js is a bit more future compatible. Look at its API (about half way down on https://github.com/browserstate/history.js

For comparison, the API of bbq is on the page http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html. There's a bit more to it than just the history portion.