Monday, June 4, 2012

What is the best back button jQuery plugin?


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

13 comments:

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


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

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

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

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

    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?

    ReplyDelete
  5. 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');
    }

    ReplyDelete
  6. 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 !

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

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

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

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

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

    ReplyDelete
  12. 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:


    http://www.asual.com/jquery/address/samples/crawling/ (AJAX Crawling)
    http://www.asual.com/jquery/address/samples/state/ (HTML5 state support)

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

    ReplyDelete