I've been spending a long time trying to figure this out but just can't.

I've made a complete layout using CSS and XHTML; combining id styles with divs. I can't, for the life of me, figure out how to use the menu I've made to have the content of the links appear in the content div instead of changing the whole page...Something like

<div id="menu">
<a href="info.htm">Info</a>
</div>

<div id="content">
I want the content from info.htm to appear here!
</div>

I hope this helps understand, it's not my real code but I thought it would help explain what I'm trying to do... Thank you very much for your help.

There are essentially two ways to achieve what you want - IFRAME or AJAX.

IFRAME will most probably do what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
function loadContent(url){
	var content = document.getElementById('content');
	if(content){ content.src = url; }
	return false;
}
</script>
</head>

<body>

<div id="menu">
<a href="http://www.alldaytime.co.uk/calc/" onclick="return loadContent(this.href);">Info</a>
</div>

<iframe id="content" src="" width="550" height="400"></iframe>

</body>
</html>

AJAX is more suitable for getting data or HTML snippets rather than whole pages. As AJAX only works, in its simplest form, with pages in the same domain as the parent page, it's hard to post a working example. Try here.

Airshow

Well I fixed the problem using jQuery's load function. However, whenever the page is refreshed, the content div returns to where it was originally placed when I want it to refresh whatever page they're currently viewing in the content div. Again, it's causing me a lot of trouble to find a solution.

Can you post a summary version of your code again.

layout:
<div id="navigation">
</div>
<div id="content">
</div>

function to load a page in content area:
$("#content").load(page);

initializing the sources for each div
$("#navigation").load("home-navigation.php");
$("#content").load("home.php");

just separated the div and jquery. jquery is in the head and it initializes the source of each div. Now say I click updates on the navigation bar it changes the content in #content. However if I refresh the page #content is reverted back to home.php instead of staying as updates.php

I want to refresh the page and have everything in #content to stay the same instead of changing back to home.php :)

I need a bit more than that - ie. how those jQuery $(...) statements are called.

<li><a onClick="loadPage('home-signup.php')">Sign up</a></li>
  <li><a onCLick="loadPage('updates.php')">News</a></li>
  <li><a onClick="loadPage('home-information.php')">Information</a>
for navgating..


 function initialize()  {
      $("#header").load("header.php");
      $("#navigation").load("home-navigation.php");
      $("#login").load("home-login.php");
      $("#content").load("home-signup.php");
      $("#footer").load("footer.php");
    }

$(initialize) is in the head section linked through an external js file so when the page is loaded these are automatically put into the divs. I hope I gave you proper information this time

That looks odd to me. You would normally build a page server-side with php include statements. Is there a reason why you're not doing it that way?

It's the only way I figured out how to. :/ I'm having a bit of trouble and that was the only way it worked for me. How would I do it with a php include? Example?

Well, I feel like an idiot. I tried that a while ago and it didn't work but now it does. Terribly sorry for that, but it seems like my problem still remains the same. If I refresh the page it returns to loading the original file containted in the content div.

and with the php include how do you set it to load only in the #content div :S

It would be something like this:

<?php
$path_to_includes = '../what/ever/';
?>
<div id="header"><?php include($path_to_includes."header.php"); ?></div>
<div id="navigation"><?php include($path_to_includes."home-navigation.php"); ?></div>
<div id="login"><?php include($path_to_includes."home-login.php"); ?></div>
<div id="content"><?php include($path_to_includes."home-signup.php"); ?></div>
<div id="footer"><?php include($path_to_includes."footer.php"); ?></div>

There will probably be a load more markup but this should give you the right idea.

Airshow

Then, construct the navigation links like this:

<li><a href="#" onClick="return loadPage('home-signup.php')">Sign up</a></li>
<li><a href="#" onCLick="return loadPage('updates.php')">News</a></li>
<li><a href="#" onClick="return loadPage('home-information.php')">Information</a></li>

And loadPage like this:

function loadPage() {
  $("#content").load(page);
  return false;
}

The secret lies in returning false from the function, then returning that returned value from each of the onclick functions.

This suppresses the natural hyperlink behaviour which would othersise occur after loadPage returns. I'm pretty certain that's what was causing your #content to revert to home.php.

Airshow

well all the links work perfectly now, thank you very much. And I don't need the initialize function anymore. When I refresh the page it still reverts to the original content. Since when the page is loaded content has the include home-signup.php. I clicked on the Updates page so that in the content div it refered to updates.php and then refreshed, but the content div went back to home-signup.php :/

from main page:
<body>

<div id="header">
<?php include("header.php"); ?>
</div>

<div id="navigation">
<?php include("home-navigation.php"); ?>
</div>

<div id="login">
<?php include("home-login.php"); ?>
</div>

<div id="content">
<?php include("home-signup.php"); ?>
</div>

<div id="footer">
<?php include("footer.php"); ?>
</div>

</body>

from navigation bar:
<li><a href="#" onClick="return (loadPage('home-signup.php'))">Sign up</a></li>
<li><a href="#" onClick="return (loadPage('updates.php'))">News</a></li>

to load pages:
function loadPage(page) {
$("#content").load(page);
return false;
}

When links are clicked, they all work perfectly fine in the #content section.
If I refresh the page, the code from the main page which assigns the php includes to each div is run and the div content is equal to home-signup.php instead of the link that I would have clicked before, such as updates.php

Refreshing will always revert the page back to its original state unless you introduce:

  • a mechanism to remember the page's state each time #content is loaded
  • an action to recreate that state after refresh.

Essentially there are two ways to do this - client-side (cookie/javascript) or server-side (php/session or php/database).

Two questions will help identify the way ahead:

  1. Do you need the remembered state to span sessions (eg. id the user shuts down his computer then returns to your site tomorrow)?
  2. Do you use a database (mySQL or similar)?

Airshow

I'll be using a mySQL database with this website, yep.

The first question I don't think applies since the user can log in and out and I only want the content section to remain the same when they refresh while they're on the site; when they log in the next day it can go back to normal as in start with home-signup and then it can change again when they click the links again

OK, then in each of your content pages (home-signup.php, updates.php, home-information.php etc.) you can simply get the php $_SESSION to remember the name of that particular page (eg. $_SESSION). In your main page, you need to include that remembered last_page or a default:

<?php
$path_to_includes = '../what/ever/';
$last_page = (isset($_SESSION['last_page'])) ? $_SESSION['last_page'] : 'home-signup.php';
?>
...
<div id="content"><?php include($path_to_includes . $last_page); ?></div>
...

PHP sessions need to be kept alive from page to page by propogating a session id. You may or may not need to do this, I'm not an expert. You can ask in Daniweb's PHP forum or do some background reading here.

Airshow

Okay, I have a bit more PHP to learn then but I'm starting to understand more. Thank you so, so much for your help.