Load whole page in AJAX

Question

Currently, I have a wordpress website. I want to load the whole page of the website. I am aiming to put a footer player on the website, and that will only work if the rest of the pages are loaded with AJAX.

The goal is to click on the link of for example an article, and that then the website with the article will load. Because the lay-out of the article page differ from the homepage, just loading one div is not enough (see http://newtheme.favoritefm.com).

I have tried this:

$.fn.initLinks = function() {
    $("a",this).click(function() {
        var url = $(this).attr("href");
        // transition to loading phase ...
        // Ajax post parameter tells the site lo load only the content without header/footer
        $.post(href,"ajax=1",function(data) {
            $("#content").html(data).initLinks();
            // transition to normal phase ...
        });
        return false;
    });
};

$(function() {
   $("body").initLinks();
});

Doesn't do anything. What to do?

Answer 1

Use the full jQuery Ajax Method: $.post instead of $.post.

So your code should look like this:

    $.fn.initLinks = function() {
    $("a", this).click(function() {
        var url = $(this).attr("href");
        // transition to loading phase ...
        // Ajax post parameter tells the site lo load only the content without header/footer
        $.ajax({
            url: url // your href attr..

                success: function(data) {

                $("#content").html($(data).filter('#content').html());

                // This fills in the #content on the current page with the html in #content from
                // the Request page
            },
            error: function() {
                alert('Could not load Data!!');
            }
        });
        return false;
    });
};

$(function() {
    $("body").initLinks();
});