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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 15, 2012 at 22:38 mgraph 15.3k44 gold badges4242 silver badges7676 bronze badges asked Apr 15, 2012 at 22:26 EmilEmil 7111 silver badge44 bronze badges 3

• What language are you using for your backend? PHP? Coldfusion? The beauty of AJAX loading is that no matter what page a person lands on, they will get what you put there BEFORE the AJAX call, so your header, footer, menu, etc. will already be there. As stated below, you can load your AJAX response into any one container on the page. If you're using AJAX to pull in content when someone clicks on the menu, then you simply replace the html inside your container with new content from the AJAX response. – Lazerblade Commented Apr 15, 2012 at 22:37
• Emil; you should select which answer was correct for your solution if you have found it. Otherwise update your question with what has changed if anything. – veeTrain Commented Apr 18, 2012 at 17:56
• I will do, sorry. I haven't got time to investigate the answers further, I was trying to work with jmort253's, but got some errors (I will make a ment about that). My work has unfortunately filtered out the connection to my server so I have no chance to do anything when I'm here. – Emil Commented Apr 19, 2012 at 9:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

It seems like you could have a couple of different options. If a user is visiting your site but not going to the first page, then you could just check to verify that the header and footers are showing after the page is loaded. If they are not found, then the initial site layout should be created. You could even decide to build the first page (index.php) this way so that every page would be handled the same way

$(document).ready(function() {
    // If an element of id "header" isn't found in the DOM
    if (!$("#header").length() > 0) {
        // Generate the header and insert it as the first element of the DOM
    }
    if (!$("#footer").length() > 0) {
        // Generate the footer and append it to the last element of the DOM
    }
});

There are no doubt other solutions that you could entertain as well; you could probably have an include on each page that only gets included if the page is requested via a GET rather than an AJAX request.

The technique that you're looking for is known as Hijax, where you intercept the response from an AJAX request and only pull out the part of the DOM that you intend to replace on the rendered page.

The general idea is that the actual URL's themselves will still return the full page content, so if the request is ing from a new visitor, the entire DOM will load, but if the request is ing from the user clicking a hijaxed link on your page with a CSS selector specified, then only the part of the page identified by the selector is replaced.

Take a look at Hijax - jQuery Plugin. The actual site itself is built using the plug-in, and if you watch your network tab and look at the inspector in your Chrome or Firebug tools, you can see the content is swapped out without replacing the menus, header, or other elements that aren't being replaced.