URL hashchange problems with ajax loading

Question

I have a functional wordpress theme that loads content via ajax. One issue that I'm having though is that when pages are loaded directly the ajax script no longer works. For example the link structure works as follows, while on www.example.com and the about page link is clicked then the link becomes www.example.com/#/about. But when I directly load the standalone page www.example.com/about, the other links clicked from this page turn into www.example.com/about/#/otherlinks. I modified the code a little bit from this tutuorial http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html. Here is my code. Thanks for the help.

jQuery(document).ready(function($) {
var $mainContent = $("#container"),
    siteUrl = "http://" + top.location.host.toString(),
    url = ''; 

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

$(window).bind('hashchange', function(){
    url = window.location.hash.substring(1); 

    if (!url) {
        return;
    } 

url = url + " #ajaxContent"; 

    $mainContent.fadeOut(function() {
        $mainContent.load(url,function(){
            $mainContent.fadeIn();
        });        
      });
    });

  $(window).trigger('hashchange');

});

hazerd · Accepted Answer · 2013-03-20 15:30:14Z

2

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.

edited Mar 20, 2013 at 15:30

answered Nov 2, 2012 at 8:49

hazerd

5924 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nick DeStefano Over a year ago

Thanks for the response, those links are great and I'll let you know how it ends up.

hazerd Over a year ago

If this post answered your question, you may want to mark it as correct by clicking the checkmark. Thanks ~

Nick DeStefano Over a year ago

I ended up going with history.js and got rid of all the hashchanges

Collectives™ on Stack Overflow

URL hashchange problems with ajax loading

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related