Question

Using a hashchange event I’m detecting when a user clicks the back button in a browser and changing the URL accordingly. Is there a better way to do this for pagination? I’m currently changing the URL after a user clicks my pagination control like so:

$(".pager").click(function(){

    var start = null;
    if ($.browser.msie) {    
        start = $(this).attr('href').slice($(this).attr('href').indexOf('#')+1);
    } 
    else {    
        start = $(this).attr('href').substr(1);
    }

    $('#start').val(start);

    $.post("visits_results.php", $("#profile_form_id").serialize(),
    function(data) {
        $('#search_results').html(data);
        location.href = "#visits=" + start; 
    }); 

    return false;
});

My javascript to detect the back button looks like this:

function myHashChangeCallback(hash) {

    if (hash == "") {
        $("#loadImage").show();

        var no_cache = new Date().getTime();
        $('#main').load("home.php?cache=" + no_cache, function () { 
        $("#loadImage").hide();
    });

    return false;

    }
    else {
    // adding code to parse the hash URL and see what page I'm on...is there a better way?; 
    }
}

function hashCheck() {
    var hash = window.location.hash;
    if (hash != _hash) {
        _hash = hash;
        myHashChangeCallback(hash);
    }
}

I currently plan on checking each hashtag and the value to see what page I should load unless there is a better more efficient way.

Any thoughts or suggestions?

Answer 1

The jQuery Address plugin does this very well. Once setup it provides a series of logical navigation events which you can hook into. It also has very good support for history.pushState() which eliminates the need for hashtags in newer browsers and has equally good fallback support for those browsers that do not support pushState.

A simple implementation would look like this:

// Run some code on initial load
$.address.init(function(e) {
    // Address and path details can be found in the event object
    console.log(e);
});

// Handle hashtag/pushState change events
$.address.change(function(e) {
    // Do more fancy stuff. Don't forget about the event object.
    console.log(e);
});

// Setup jQuery address on some elements
$('a').address();

To enable pushState() support pass an argument to the script like so:

<script type="text/javascript" src="jquery.address-1.3.min.js?state=/absolute/path/to/your/application"></script>