Ajax pages (for wordpress)

Question

So,I am trying to add ajax to my site and load parts of pages according to the picture below:

The markup is very simple:

<div id="top"> A  </div>
<div id="content">
    <div id="middle"> B  </div>
    <div id="bottom"> C  </div>
</div>

"A" is the top menu. "B" is the main content and "C" is the sub content. I am trying to set up ajax for the following actions:

When "A" is clicked, then only the "B" and "C" are changed. When "B" is clicked, then only "C" is changed.

I have gone through some tutorials (which were recorded around 2012, and seems outdated).

Here is what I have so far:

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;
        }); 
    $("#searchform").submit(function(e) {
        location.hash = '?s=' + $("#s").val();
        e.preventDefault();
    }); 
    $(window).bind('hashchange', function(){
        url = window.location.hash.substring(1); 
        if (!url) {
            return;
        } 
        url = url + " #content"; 
        $mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
            $mainContent.animate({opacity: "1"});
        });
    });
    $(window).trigger('hashchange');
});

(Code from http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html)

Now, I was able to make it work. Here is a few of my concerns. First, it seems like this code is bit outdated and other users suggested history.js. Second, I am trying to modify the js file for my site and how A, B and C interacts as explained above.

When A is clicked, then the id="content" will be targeted. I am trying to modify it is so that when B is clicked then C is targeted.

I am not 100% comfortable with javascript and any help will be much appreciated.

Thanks.

Answer 1

I don't think this code is going to do what you think it will. Wordpress has a jSon API for sending data back and forth. You'd want to have Page "A" send a jSon request to your site, which would then reply with the CONTENT of pages B or C, not the whole page request, which then page A would put in it's proper place. In Wordpress, doing it like this would generally leave you with the entire site, including the header and nav, embedded within page B & C. You have to develop a method to deliver only the content of pages B and C, not the whole site as would be shot in a normal HTTP request. This is a pretty advanced technique.