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 http://www.example.com and the about page link is clicked then the link becomes http://www.example.com/#/about. But when I directly load the standalone page http://www.example.com/about, the other links clicked from this page turn into http://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');

});

Answer 1

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 http://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 http://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 http://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 http://www.example.com/mysite/, you will need changes in the regex.

Please let me know how it went.