Jump to content

Using AJAX to Expand/Collapase PHP/MySQL results


suttercain

Recommended Posts

Hi everyone,

 

Before you yell at me and tell me this should be posted in the AJAX section, let me explain myself :)

 

I am able to apply the AJAX expand and collapse function with no problem when I am not trying to do it in PHP.

 

Here is an example of what I am trying to do, but the example is ASP:

http://ajax.asp.net/ajaxtoolkit/CollapsiblePanel/CollapsiblePanel.aspx

Here is the site I am trying to get this to work on:

http://www.supermandatabase.com/storyarcs1.php

 

As you can see on my page, there are numerous tables outputted from the mysql database. What I would like to do is have the tables outputted with only the table headers, and I will replace "COVER DATE" with an expand link... right now the link is there but it doesn't work.

 

Here is the code for the page I link to above:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@import url("sd_style.css");
</style>
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>
<?php require ('get_connected.php'); ?>
<?php include ('head.php'); ?>
<title>Superman Database :: Story Arcs</title>
<body>
        <table width="986"  border="0" cellspacing="0" cellpadding="5" valign="top">
            <tr>
              <td colspan="2" valign='top' bgcolor="#FFFFFF">
			<table width="650" border="0" align="center" cellpadding="2" cellspacing="2">
                <tr>
                  <td colspan="2" valign='top'>
			  <h2>Comic Book Story Arcs</h2></td>
                </tr>
                  </tr>
               
  <tr>
    <td colspan="2" valign='top'><?php       
//Convert seriesTitle Column to out put from the MySQL instead of HTML

$sql = mysql_query("SELECT * FROM comics WHERE story_arc != '' AND story_arc != 'null' AND story_arc IS NOT NULL ORDER BY story_arc, arc_part") or die (mysql_error());

$current = '';
$series = '';
while($row = mysql_fetch_assoc($sql)) {
  if($current != $row['story_arc']) {
    $current = $row['story_arc'];
    echo "<table width='630' border='0' bgcolor=#253b5a cellpadding='3' cellspacing='1'>
<tr>
        <td width='430'><font color=#ffffff><b>" . strtoupper($current) . "</b></font></td>
	<td width='150'<font color=#ffffff><b>PART</b></font></td>
	<td width='150'<font color=#ffffff><b>"; ?><a onclick="switchMenu('myvar');">COVER DATE</b></font></a><?php echo "</td>
</tr><br>";
  }
  
  //Continuation of CSS for the Alternating Color Rows
  $class = $class == 'even' ? 'odd' : 'even';
  //Populate the Tables from the Database
  echo "<tr class=\"$class\">\n";
  echo "<div id='myvar'>";
  echo "<td><a href='/comics/view_comics.php?id=" . $row['comic_id'] . "'>" . $row['title'] . " #".$row['issue_number']."</a></td>\n";
  echo "<td>".$row['arc_part']."</td>\n";
  $cover_date = date('F, Y', strtotime($row['cover_date']));
  echo "<td>$cover_date</td>\n";
  echo "</tr>\n";
  echo "</div>";
}
echo "</table>";
echo "<br>";
?>	
</td>
  </tr>
                </table>				<div align="left"><br>
                </div></td>
              <td></td>
            </tr>
                  <tr>
                    <td width="17%" valign="top"></td>
                  </tr>
			</table>
                </table>
<?php include('foot.php'); ?>
</body>
</html>

 

Any suggestions or advice would be great. Thanks for your time.

 

SC

 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.