It sounds to me like you want to use AJAX and just call the proper php file or send a bunch of $_GET variables to the php page.
You should look at either jQuery or Prototype as two widely supported javascript "frameworks" to use with AJAX and animations (jQuery more with the animation than Prototype).
Here's a quick example of what I see from your post:
1.) Main HTML page is created using AJAX to power it. On the page load, an AJAX query is fired which sends no $GET items to the page ajax.php.
2.) ajax.php receives a request with nothing in the $GET. So it runs a quick query on the database and returns a list of names as links. Each link (when clicked) will then execute another jQuery AJAX call. The response is sent as JSON or XML.
3.) The response is read and parsed properly. The left div is then populated with the list of names.
4.) User clicks on a name on the left. This time the "name" $GET variable is passed on the click event which is passed on via AJAX to ajax.php
5.) ajax.php sees that "name" is set, it runs an alternative query to get names based on "name". The response is again sent as JSON or XML.
6.) Again the response is parsed and the center div is populated.
7.) User clicks on a link in the center where both "name" and "name2" are sent via an AJAX call to ajax.php
8.) ajax.php sees these two $GET variables and runs a third query which gets all the information for that person. Then it formats the extra info and sends it as JSON or XML.
9.) For the last time, the response is parsed, and the third div is populated with the response.
Now, using AJAX you only need two files (well, 3 if you want to include the jQuery javascript file). The PHP will do all the heavy lifting, and the HTML will be lightweight.
The alternative to this is to use a few PHP pages and "forms" or links with $_GET variables. It would work the same way, except that the page would refresh each time instead of just letting part of the page refresh.
I'll work on a quick example right now. If you give me like 1/2 an hour, I can probably whip something up to mimic what you want....
EDIT:
Okay, so here it is, check it out. It doesn't do any mySQL stuff, but you could modify it to do what you need: Click Here
The code is below (two files 😉 )
HTML File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX, PHP, and Pseudo MySQL</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author" value="bpat1434 (Brett Patterson)" />
<script language="JavaScript" type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function sendReq(qstring, div)
{
$('#loader').show('fast');
$.ajax({
type: "GET",
url: "10836339_ajax.php",
data: qstring,
dataType: "html",
success: function (data, status) {
$(div).html(data);
},
error: function () {
$(div).html('<h4>Error</h4><p>There was an error processing your request. Please try again later.</p>');
},
success: function() { $('#loader').hide('fast'); }
});
$(div).animate({
display:"visible",
opacity:100
});
}
$(document).ready(function(){
sendReq('', '#left');
});
// ]]></script>
<style type="text/css"><!--
#wrapper {
width:90%;
position:absoulte;
top:15px;
left:5%;
}
#left {
width:33%;
margin:0;
padding:0;
height:400px;
overflow:auto;
float:left;
background-color:#93db70;
}
#mid {
width:33%;
margin:0;
padding:0;
height:400px;
overflow:auto;
float:left;
background-color:#b9d3ee;
opacity:0.0;
}
#right {
width:33%;
margin:0;
padding:0;
height:400px;
overflow:auto;
float:left;
background-color:#eee9bf;
opacity:0.0;
}
#loader {
position:absolute;
top:-2px;
left:200px;
right:200px;
padding:0;
border:2px solid #ccc;
background-color:#ebebeb;
opacity:0.85;
text-align:center;
}
#loader div {
width:400px;
margin:7px auto 5px auto;
min-height:24px;
}
#loader div h4 {
width:100%;
margin:5px 0;
text-align:center;
padding:0;
float:left;
}
#loader div p {
width:100%;
margin:0 5px;
padding:0;
text-align:center;
float:left;
}
--></style>
</head>
<body>
<div id="wrapper">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
<div id="loader">
<div>
<h4>Please Wait...</h4>
<p>as we request information from the server</p>
</div>
</div>
</body>
</html>
PHP
<?php
if(!isset($_GET) || empty($_GET) || !isset($_GET['alpha']) || empty($_GET['alpha']))
{
$alphas = range('a', 'z');
echo '
<div style="margin:5px;padding:0;">';
foreach($alphas as $alpha)
echo '
<a href="' . $_SERVER['PHP_SELF'] . '?alpha=' . $alpha . '" onclick="sendReq(\'alpha=' . $alpha . '\', \'#mid\'); return false;">' . strtoupper($alpha) . '</a><br />';
echo '
</div>';
}
elseif(isset($_GET['alpha']) && !empty($_GET['alpha']) && !isset($_GET['name']) || empty($_GET['name']))
{
switch($_GET['alpha'])
{
case 'a':
$names = array('Andrew', 'Adam');
break;
case 'b':
$names = array('Brett');
break;
case 'c':
$names = array('Crystal', 'Caroline');
break;
case 'd':
$names = array('David', 'Darlene');
break;
case 'e':
$names = array('Erin');
break;
case 'f':
case 'g':
case 'h':
case 'i':
case 'j':
case 'k':
case 'l':
case 'm':
case 'n':
case 'o':
case 'p':
case 'q':
case 'r':
case 's':
case 't':
case 'u':
case 'v':
case 'w':
case 'x':
case 'y':
case 'z':
default:
$names = array();
break;
}
echo '
<div style="margin:5px;padding:0;">';
if(!empty($names))
{
foreach($names as $name)
{
echo '
<a href="' . $_SERVER['PHP_SELF'] . '?alpha=' . $_GET['alpha'] . '&name=' . $name . '" onclick="sendReq(\'alpha=' . $_GET['alpha'] . '&name=' . $name . '\', \'#right\'); return false;">' . $name . '</a><br />';
}
}
else
{
echo '<h4>No Names</h4><p>Sorry but there are no names starting with that letter.</p>';
}
echo '
</div>';
}
else
{
echo '
<div style="margin:5px;padding:0;">';
switch($_GET['name'])
{
case 'Andrew':
echo '
<h4>Andrew</h4>
<p>An old neighbor of mine. Used to wear shorts in the snow. Interesting person.</p>';
break;
case 'Adam':
echo '
<h4>Adam</h4>
<p>The male counterpart to Eden, if you believe in that kind of thing.</p>';
break;
case 'Brett':
echo '
<h4>Brett</h4>
<p>The coolest moderator on PHPBuilder forums :)</p>';
break;
case 'Crystal':
echo '
<h4>Crystal</h4>
<p>A friend of mine from college. Sweet girl, awesome personality.</p>';
break;
case 'Caroline':
echo '
<h4>Caroline</h4>
<p>I\'m not really sure, but I recognize the name....</p>';
break;
case 'David':
echo '
<h4>David</h4>
<p>One of my best friends for high school. The man in charge of <em>Chaz</em>';
break;
case 'Darlene':
echo '
<h4>Darlene</h4>
<p>Middle child of the Conner\'s on the TV show Roseanne.</p>';
break;
case 'Erin':
echo '
<h4>Erin</h4>
<p>Some girl I met in college.... worked with her for a couple years.</p>';
break;
}
echo '
</div>';
}
sleep(5); // just to show the "loader" bar since it's such a fast query...
?>
