URL hashchange problems with ajax loading URL hashchange problems with ajax loading wordpress wordpress

URL hashchange problems with ajax loading


The problem you are expressing is not easily solved. There are multiple factors at stake but it boils down to this :

  • Any changes to a URL will trigger a page reload
  • Only exception is if only the hash part of the URL changes

As you can tell there is no hash part in the URL www.example.com/about/. Consequently, this part cannot be changed by your script, or else it will trigger page reload.
Knowing about that fact, your script will only change the URL by adding a new hash part or modifying the existing one, while leaving alone the "pathname" part of the URL. And so you get URLs like www.example.com/about/#/otherlinks.

Now, from my point of view there are two ways to solve your problem.

First, there is an API that can modify the whole URL pathame without reload, but it's not available everywhere. Using this solution and falling back to classical page reload for older browser is the cleaner method.

Else, you can force the page reload just once to reset the URL to www.example.com/ and start off from a good basis. Here is the code to do so :

$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/]))", "click", function() {    location = location.assign('#' + this.pathname);    return false;}); 

It should be noted that this script won't work if your site is not at the root of the pathname. So for it to work for www.example.com/mysite/, you will need changes in the regex.

Please let me know how it went.