AJAX/Java script to change div content between two php scripts.

[jpadams]

I am new to AJAX and I am trying to create a script that will change content of a div.

My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in.

How my list.php script works is as follows:


// generate and execute query
$query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// if records present
if (mysql_num_rows($result) > 0)
{
// iterate through resultset
// print news titles
while($row = mysql_fetch_object($result))
{
?>
<b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font>
<br>
<font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font>
<p>
<?
}
}
// if no records present
// display message
else
{
?>
<font size="-1">No news is bad news</font>
<?
}

How my story.php script works is as follows:


// generate and execute query
$query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// get resultset as object
$row = mysql_fetch_object($result);

// Show me the news
if ($row)
{
?>
<p>
<b><? echo $row->title; ?></b>
<p>
<font size="-1"><? echo nl2br($row->content); ?></font>
<p>
<font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font>
<?
}
else
{
?>
<p>
<font size="-1">That news post could is not found.</font>
<?
}

If you need more information for this I will provide whatever you need.