At the moment I am trying to create a setup where page content is loaded within the main to avoid having to refresh the page for every link.

I am using jQuery load as follows for every link that is clicked so that the link is loaded into the #main. (Obviously it won't be all links when complete.)

Pages visited directly work fine but if you try and use this load link then it will load the content correctly but only shows the loaded html in view source, am I doing something wrong here?

$("body").on("click", "a", function(){

    $("#footer, #main").fadeOut('fast');

    $("#main").load($(this).attr("href"), function(){

        $("#main, #footer").fadeIn('slow');

    });

    return false
});

• jquery

The issue that causes this problem with .load() is when the file you are including contains <script></script> tags.

These interfere with the Javascript and it can't cope causing the page to error.

To stop the issue you must remove the <script></script> tags from within the loaded file.

You faded out the main, and didn't fade it in again...
Use this:

$("body").on("click", "a", function(){    
    $("#footer, #main").fadeOut('fast');    
    $("#main").load($(this).attr("href"), function(){    
        $("#main").fadeIn('slow'); // <======================
        //$(this).fadeIn('slow'); this isn't the main object!
        $("#footer").fadeIn('slow');    
    });    

    return false
});

this inside the callback isn't the DOM element!!!