Results 1 to 5 of 5

Thread: Dynamically Populate Div

  1. #1
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamically Populate Div

    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!

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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;
    }
    
    ?>

  5. #5
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    }
    ?>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •