Dynamically Populate Div

**dfowler** · 04-07-2008, 07:49 PM

Hey guys, I'm trying to set up a system where depending on what you pick with a dropdown it will create a list of links within a div. Here is the database structure:
categories
id
name
description
parent_id
date

pdfs
id
name
location
date

cat_pdfs
id
cat_id
pdf_id

Basically, depending on the category you choose with the dropdown, it will display a list of links to the pdfs associated with that category. I'm hoping to do this all on one page, and would think that AJAX might work. However, I'm not really sure what to do. Thanks for any help!

**rangana** · 04-08-2008, 03:02 AM

This is just a basic example, see if it helps

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
    margin:10px auto;
    padding:0;
    height:100%;
 }  
 #wrap
 {
 width:760px;
 margin:20px auto;
 padding:10px;
 border:5px double #222;
 }
 #change
 {
 display:inline; margin:10px;background:#fc0;padding:10px 150px 10px;
 text-align:left;
 }
</style>
<script type="text/javascript">
function change()
{
   switch (document.getElementById("select").value)
   {
      case "1":
      document.getElementById("change").innerHTML = "Option 1 has changed this DIV tag's content"
      break;
      case "2":
      document.getElementById("change").innerHTML = "Option 2 has changed this DIV tag's content"
      break;
      case "3":
      document.getElementById("change").innerHTML = "Option 3 has changed this DIV tag's content"
      break;
	   case "4":
      document.getElementById("change").innerHTML = "Option 4 has changed this DIV tag's content"
      break;
      case "5":
      document.getElementById("change").innerHTML = "Option 5 has changed this DIV tag's content"
      break;
      case "6":
      document.getElementById("change").innerHTML = "Option 6 has changed this DIV tag's content"
      break;
	   case "7":
      document.getElementById("change").innerHTML = "Option 7 has changed this DIV tag's content"
      break;
      case "8":
      document.getElementById("change").innerHTML = "Option 8 has changed this DIV tag's content"
      break;
      case "9":
      document.getElementById("change").innerHTML = "Option 9 has changed this DIV tag's content"
      break;
	   case "10":
      document.getElementById("change").innerHTML = "Option 10 has changed this DIV tag's content"
      break;
      case "11":
      document.getElementById("change").innerHTML = "Option 11 has changed this DIV tag's content"
      break;
      case "12":
      document.getElementById("change").innerHTML = "Option 12 has changed this DIV tag's content"
      break;
   }
}
</script>
</head>
<div id="wrap">
<body>
<select onchange="change()" id="select">
	<option>---Select---</option>
	<optgroup label="Categories">
	<option value="1">Id</option>
   <option value="2">Name</option>
   <option value="3">Description</option>
   <option value="4">Parent_id<option>
   </optgroup>
   
   <optgroup label="PDF's">
	<option value="5">Id</option>
   <option value="6">Name</option>
   <option value="7">Location</option>
   <option value="8">Parent_id<option>
   </optgroup>
   
   <optgroup label="Cat_PDF's">
	<option value="9">Id</option>
   <option value="10">Name</option>
   <option value="11">Description</option>
   <option value="12">Parent_id<option>
   </optgroup>
</select>
<div id="change">
This is the default text
</div>
</div>
</body>
</html>

**dfowler** · 04-08-2008, 12:37 PM

Thanks for you help so far, this does change the div but isn't exactly what I am looking for just yet. I'll go into a little more detail, as I can see by rereading my first post there is a lot left out.

The first database (categories) is going to be the dropdown list. It will look something similar to this:

Code:

<?php
$query1 = "SELECT * FROM categories";
$result1 = mysql_query($query1);
$cats = array();
while (($row = mysql_fetch_assoc($result1)) !== false) {
  $cats[] = $row;
}
?>
	Category: <select name="cat">
	<option value="0"></option>
	<?php foreach($cats as $c) { ?>
		<option value="<?php echo $c['id']; ?>"><?php echo $c['name']; ?></option>
	<?php } ?>
	</select>

What I am hoping is that when you pick a category it will take that number and reference it with the cat_pdfs table to find the pdf_id. Then using that id select the appropriate pdf(s) from the pdfs table. Then I would like to do something like this:

Code:

<a href="pdfs:location">pdfs:name</a>

To populate the div.

I hope this clarifies a little more.

**dfowler** · 04-08-2008, 04:01 PM

Ok, I think I might have figured out a way to do this by looking on this board. I thought I could use this script to get the results I want:
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

The difference is instead of just making links, still using the dropdown list. I have to figure out how to make the dropdown be links to the div on the page. Something like this:

Code:

<option value="location/outside_page.php?id=<?php echo $id;?>">

Then on the outside page do something similar to this:

Code:

<?php
include 'admin/system.php';

$cat_id = $_GET['id'];

$query = "SELECT * FROM cat_pdfs WHERE cat_id='$cat_id'";
$result = mysql_query($query);
$catid = array();
while (($row = mysql_fetch_assoc($result)) !== false) {
  $catid[] = $row;
}

pdfs=array();
foreach($catid as $c) {
$query2 = "SELECT * FROM pdfs WHERE id='".$c['pdf_id']."'";
$result2 = mysql_query($query2);
while (($row2 = mysql_fetch_assoc($result2)) !== false) {
  $pdfs[] = $row2;
}

?>

**dfowler** · 04-09-2008, 01:48 PM

I ended up just completely reworking my thinking behind this. Here is the new script and it works perfectly!

Code:

<?php
include 'admin/system.php';

$query1 = "SELECT * FROM categories";
$result1 = mysql_query($query1);
$cats = array();
while (($row = mysql_fetch_assoc($result1)) !== false) {
  $cats[] = $row;
}

if (!$_GET['id']) { ?>
		<form name="form1">
			<select name="categories" ONCHANGE="location=this.options[this.selectedIndex].value;">
			<option selected>--- Choose a Category to Browse ---</option>
					<?php foreach($cats as $c) { ?>
					<option value="http://www.site.com/index.php?id=<?php echo $c['id']; ?>"><?php echo $c['name']; ?></option>
					<?php } ?>
				</select>
		</form>
	</td>
<?php
} else {
$cat_id = $_GET['id'];

$query = "SELECT * FROM cat_pdfs WHERE cat_id='$cat_id'";
$result = mysql_query($query);
$catid = array();
while (($row = mysql_fetch_assoc($result)) !== false) {
	$catid[] = $row;
}

$pdfs=array();
foreach($catid as $c) {
	$query2 = "SELECT * FROM pdfs WHERE id='".$c['pdf_id']."'";
	$result2 = mysql_query($query2);
	while (($row2 = mysql_fetch_assoc($result2)) !== false) {
		$pdfs[] = $row2;
	}
}
?>
		<form name="form1">
				<select name="categories" ONCHANGE="location=this.options[this.selectedIndex].value;">
				<option selected>--- Choose a Category to Browse ---</option>
				<?php foreach($cats as $c) { ?>
					<option value="http://www.site.com/index.php?id=<?php echo $c['id']; ?>"><?php echo $c['name']; ?></option>
				<?php } ?>
			</select>
		</form>
		<div id="pdfs">
			<table>
			<?php foreach($pdfs as $p) { ?>
				<tr>
					<td><a href="<?php echo $p['location']; ?>" target="_blank"><?php echo $p['name']; ?></a></td>
					<td><a href="<?php echo $p['location']; ?>" target="_blank"><?php echo $p['date']; ?></a></td>
				<tr>
			<?php } ?>
			</table>
		</div>
	</td>
<?php
}
?>

Thread: Dynamically Populate Div

Thread Tools

Search Thread

Dynamically Populate Div

Bookmarks

Bookmarks

Posting Permissions