Question

I’ve been trying to add some AJAX/jQuery script to my site so that only the main content loads when you navigate through the site, and hence the navigation at the top will not reload.

This is my site structure:

<div id=container>

 <div id="header">

  <!-- Header + Navigation Buttons, same throughout the site. -->

 </div>

 <div id="main">

  <!-- content of each page, different on each page. -->

 </div> 

</div>

Also note that each navigation button leads to an index.php file on a different sub-directory, e.g http://www.mysite.com/contact, http://www.mysite.com/comments etc.

How can I make the #header stay throughout the site, so when I click a link in the navigation bar that nav bar doesn’t reload, however the #main content does?

I eventually would like to add transitions to the #main content aswell, so when you navigate through the site you’ll never see a blank white page while the page is loading – instead you’ll always see the nav bar etc. and the #main content would fade in and out.

Previously, I used this:

<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>

But it didn’t work (note I did write the correct subdirectory) and the whole page would reload as normal.

If you could help me out I’d greatly appreciate it!

Thanks in advance!
mlazim14

Answer 1

<script type="text/javascript">
  $(document).ready(function() {
    $('#main').load('/subdirectory/ #main');
  });
</script>