0

I'm setting the URL after the hashmark with a jquery click event. The URL is getting set properly but when I use the browsers back button it doesn't take me to the previous page.

Before my click event the URL looks like this:

http://example.com/menu.php?home

My click event looks like this:

$('#visits').click(function() { 
    $('#main').load("visits.php?type=1&view=1", function () { 
        location.href = "#visits";  
    });
    return false;
});

My URL now looks like this:

http://example.com/menu.php?home#visits

It seems as though menu.php doesn't get called with the browsers back button.

Any idea what I'm missing?

Paul
  • 11,671
  • 32
  • 91
  • 143

3 Answers3

1

Use the onhashchange event of the window, to check if the hash changes. This is getting called when you hit the back Button of your browser.

$(window).bind('hashchange',function() {
    if (location.hash != '#visits') {
        //Code to revert the changes on the page
    }
}
Wulf
  • 3,878
  • 2
  • 22
  • 36
  • This works great in chrome and FF but with IE the function isn't getting called. Any idea why? Thanks! – Paul Jul 25 '11 at 19:36
  • I found a similar question on stackoverflow regarding your new problem: [onhashchange with IE 9](http://stackoverflow.com/questions/4984319/onhashchange-with-ie-9) – Wulf Jul 25 '11 at 19:39
  • The one thing I've noticed is that with Chrome and FF the hash tag is removed when using the browsers back button. with IE the hashtag remains like so: http://localhost/menu.php?home# – Paul Jul 25 '11 at 19:43
1

Older versions of IE don't support hashchange, so you have to cheat by using setInterval to poll a few times a second and check if it's changed.

if($.browser.msie && $.browser.version < 7){
    setInterval(function(){
        if(window.location.hash != window.lastHash){
            hashChangeHandler();
            window.lastHash = window.location.hash;
        }
    }, 100);
}
else{
    $(window).bind('hashchange',function() {
        if (location.hash != '#visits') {
            hashChangeHandler();
        }
    }
}
Mike Ruhlin
  • 3,546
  • 2
  • 21
  • 31
  • I don't actually remember offhand which versions of IE support it and which don't, so you might need to do for < 8. I ended up just using the interval hack for everything to keep my code more readable. – Mike Ruhlin Jul 25 '11 at 19:48
1

You could code something like this:

var _hash = '';

function myHashChangeCallback(hash) {
    // handle hash change
    // load some page using ajax, etc
}

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

setInterval(hashCheck, 100);
  • Will this work for older IE browsers. I test with IE 9 and it works just fine. – Paul Jul 25 '11 at 19:56
  • This method probably works on all browsers, it just checks every 100ms if there is any change in the url hash, it's very simple and browser generic, also, it does not use any library like jQuery in order to work. –  Jul 25 '11 at 20:00