$().load() instead of loading whole page, but need to keep menu on all pages

html, javascript, jquery

Solution

page.php:

<div id="header"></di>
<div id="mainContent"></div>
<div id="footer"></div>

js:

$("#content").load("page.php #mainContent"); //that will only load mainContent

or:

$.get('page.php', function (data) {
    data = $(data).find('#mainContent').html();
    $("#content").empty().append(data);
});

For more information, see the section in the jQuery documentation on load() and page fragments

Problem

I want to reload on the content area of my website with jQuery/AJAX `$().load()` function. But my problem is that the `header` and `footer` needs to be displayed on all pages no matter your entry URL. My site is build using templates, so my first thought was to remove the output of the layout above and below the unique content, as I would then prevent ie. the menu from being displayed twice. But I realized that if the user is not entering my site through the first page, lets say index.php, he won't ever see header or footer just an unstyled text page. My question is, how would you work around this issue? JavaScript (+ jQuery) and HTML5 is allowed.

Original source