How to update the html content of a single div?

Question

I'm sure that this is a very simple problem, but I have multiple pages each with their own 'content' with page navigation at the bottom. Before I start coding a script to generate several different html files who all have head, body, and navigation footer code... how could I have only one instance of the navigation footer and have the links only update the content inside the 'content' div?

Answer 1

Very basic example of updating an element's content via JavaScript:

<div id="content"></div>

<script>
    document.getElementById('content').innerHTML='<b>oh hai</b>';
</script>​​​​​​​​​​​​​

To do it when someone clicks on a link, you'd attach a function to the onclick handler for that link that does the updating and then returns false so the link won't do it's usual navigation.

If you don't want to have all the content loaded into a single file, you can use AJAX to retrieve content dynamically. You may wish to use a library/framework like jQuery to simplify the coding of AJAX interactions.

Answer 2

You can do this with AJAX. An example with jQuery is using the load function:

http://api.jquery.com/load/

This will fetch a given URL and load its contents into an element matched by a selector.

Answer 3

This can be solved in a few different ways. You'll either need to load all possible contents at once (easy to access content after load, but slow initial load), or you can asynchronously request content as your user requires it.

1) Hardcode all content into one page

By doing this, you'd have a selection of content blocks hidden on your page:

<div class="content-blocks">
  <div class="content" id="content1">...</div>
  <div class="content" id="content2">...</div>
  ...
</div>

Then, each link would have an event handler to load the appropriate content into your main content element.

document.getElementById('content1-link').onclick = function() {
    document.getElementById('content-box').innerHTML = document.getElementById('content1').innerHTML
}

2) Make AJAX requests for content

To do this, your various content blocks would be stored in external files, eg 'content1.html', 'content2.html', etc. I would highly recommend using a javascript library with AJAX support for this method, as they will handle differences in how browsers handle asynchronous requests. Some, like jQuery, also provide convenience functions to do such tasks:

$('#content1-link').on('click',function(){
  $('#content-box').load('/path/to/content1.html');
});

3) Use include statements

This method has the ease of implementation of the first solution (doesn't rely on async requests), but it keeps your content in separate files, like the second solution. Basically, you utilize whatever type of include your server/language supports (eg SSI includes, PHP require , etc). You would then create the event handlers as in the first option.