Firefox and window.location.hash

Question

Im currently testing an AJAX app in firefox 3.6.15 that uses window.location.hash changes for navigation when I need the page to not reload.

I have a link that does this:

var editCategoryClick = (function (categoryID) {
                return function () {
                    if (window.location.hash != window.location.hash + '/' + categoryID) {
                        window.location.hash = window.location.hash + '/' + categoryID;
                    }
                }
            })(category.ID);

This works great. I end up with this result. '#numbers/categories' becomes '#numbers/categories/eba38179-d492-4bb9-ba66-1bfa4c3571fb'

However, if I manually go into the browser navigation bar and change '#numbers/categories' to #numbers/categoriesX', the hash will not update when I run the click function.

I do not have this problem in any of the other browsers I am testing chrome, safari, ie9, ie8. Only firefox exhibits this behavior. I know its a rare case, but its still a UX issue.

Thanks in advance for any help.

Answer 1

1. Attach an onhashchange event listener to probe for hash change. For unsupported browser, use setInterval to detect the change.
2. Why reinvent the wheel if you could use something like jQuery History ?