Forum Moderators: open
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.
It sounds like the output on your page will look something like this:
<div>
<b><font size="+2"><a href="story.php?id=123">TITLE</a></b></font>
<br>
<font size="-2"><center>TIMESTAMP</center></font>
<p>
...
</div>
If you haven't already, I would start by giving this div an id so you can target it easily:
<div id='list'>
...
</div>
Now, for the script, you'll want to fetch all of the link elements, and attach an onclick event listener/handler that will perform the AJAX request, and put the results into the div. I would suggest using event listeners and/or a framework like YUI or jQuery, but you can also use plain old event handlers.
Here's a quick example using event handlers. It's probably not the ideal way to do this, but it might help you get going:
var div = document.getElementById('list'),
aList = div.getElementsByTagName('a'),
i;
for (i = 0; i < aList.length; i++) {
aList[i].onclick = function () {
var href = this.href,
xhr = getXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
div.innerHTML = xhr.responseText;
}
}
xhr.open("GET", href, true);
xhr.send(null);
return false; // Stop the default behavior
}
}
So what that will do is perform an AJAX request to the URL that the link would normally redirect the browser to, then it will replace the innerHTML of the div with the results (note, this will remove all of your <a> elements, etc, in that div).
This may help you get started. Let us know if you have more questions.
