Tip: Click lines to highlight, hold ctrl/cmd to multi-select

ajax back button support (31-Mar @ 15:51)

Simple test to demonstrate ajax back button support using anchors Uses a jquery plugin found at http://benalman.com/projects/jquery-hashchange-plugin to listen for address change events

www.flickr.com-photos-bjarlestam

Syntax Highlighted Code

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <body>
  4.     <div id="state">no state</div>
  5.     <div id="subState">no substate</div>
  6. </body>
  7.  
  8. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
  9. <script type="text/javascript" src="http://github.com/cowboy/jquery-hashchange/raw/v1.2/jquery.ba-hashchange.js" ></script>
  10. <script>
  11.     jQuery(document).ready(function() {
  12.  
  13.         function setStates(state, substate) {
  14.             jQuery('#state').text(state);
  15.             jQuery('#subState').text(substate);
  16.         }
  17.  
  18.        
  19.         jQuery(window).bind( 'hashchange', function(){
  20.             if(location.hash.length > 1) {
  21.                 var args = location.hash.split('/');
  22.                 var state = args[0].replace('#', '');
  23.                 var substate = args[1];
  24.                 setStates(state, substate);
  25.             }
  26.         });
  27.        
  28.         jQuery(window).trigger('hashchange');
  29.     });
  30. </script>
  31. </html>

Plain Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
    <div id="state">no state</div>
    <div id="subState">no substate</div>
</body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://github.com/cowboy/jquery-hashchange/raw/v1.2/jquery.ba-hashchange.js" ></script>
<script>
    jQuery(document).ready(function() {

        function setStates(state, substate) {
            jQuery('#state').text(state);
            jQuery('#subState').text(substate);
        }

        
        jQuery(window).bind( 'hashchange', function(){
            if(location.hash.length > 1) {
                var args = location.hash.split('/');
                var state = args[0].replace('#', '');
                var substate = args[1];
                setStates(state, substate);
            }
        });
        
        jQuery(window).trigger('hashchange');
    });
</script>
</html>

Codedump Run

Permalink: http://codedumper.com/ajax-back-button-support