Need Help with loading dynamic content into a div using jQuery

RyanMinor

Using CodeIgniter, I am trying to dynamically load content from my database into a div in my view called dynamic. I have a grid of products to the left of the dynamic div and when a user clicks on one of them I want the dynamic div to be populated with details on the product that they clicked on. I really only need to return the appropriate data array and not actually load an entire new view into the dynamic div. Additionally, I would like the page to load with the first product selected and displayed automatically. I have tried to follow several tutorials on how to do this, but all I have done is run in circles. Any help is appreciated. The code that I currently have is below. All help is greatly appreciated. If you would like to see the actual page I am working with go to http://www.digrepro/category/index/everyday-looks.

Controller (category.php). The product function is what is called when the user clicks on a thumbnail product.

public function product() {
    $product_id = $_POST['product_id'];
    $data['product'] = $this->Category_model->getOneProduct($product_id);
}

Model (Category_model.php). This function grabs the proper information from the database.

public function getOneProduct($id) {
    $result = $this->db->query("SELECT *
        FROM product 
        WHERE product_id = ?", array($id)); 
    return $result->row_array();
}

View (category_view.php). See the dynamic div below. That is where I want to load the dynamic data based on what product the user clicks.

<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $page['page_title']; ?></title>
<meta charset="utf-8">
<meta name="keywords" content="<?php echo $page['page_meta_keywords']; ?>"/>
<meta name="description" content="<?php echo $page['page_meta_description']; ?>"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/menu.css" type="text/css" media="all">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/bgstretcher.css" type="text/css" media="all"; />
<link href='http://fonts.googleapis.com/css?family=Didact+Gothic:regular' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jqFancyTransitions.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/bgstretcher.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('body').bgStretcher({
  images: ['<?php echo base_url(); ?>images/background.jpg']
 });
 $('#slideshowHolder').jqFancyTransitions({
  delay: 5000, 
  width: 483, 
  height: 573, 
 });
});
</script>
</head>
<body>

<div id="main">

<div>/div>

<?php $this->load->view('menu_view'); ?>

 <div id="content">

    <div id="left">
     <div id="slideshowHolder">
     <?php foreach ($rotators as $rotator) { ?>
      <img src="<?php echo base_url(); ?>images/<?php echo $rotator['rotator_photo']; ?>" width="100%" alt="">
   <?php } ?>
            </div>
        </div>

    <div id="right">
     <div>
   <table width="50%" cellpadding="5" >
   <tr>
   <?php $sql_endRow = 0;
   $sql_columns = 3;
   $sql_hloopRow1 = 0;
   foreach ($products as $product) {
    if($sql_endRow == 0  && $sql_hloopRow1++ != 0) { ?>
     <tr>
    <?php } ?>
    <td align="center">
                 <a href="">
                  <img src="<?php echo base_url(); ?>products/<?php echo $product['product_thumbnail']; ?>" />
                    </a>
                </td>
    <?php $sql_endRow++;
    if($sql_endRow >= $sql_columns) { ?>
     </tr>
           <?php $sql_endRow = 0;
    }
   }
   if($sql_endRow != 0) {
    while ($sql_endRow < $sql_columns) { ?>
     <td>&nbsp;</td>
     <?php $sql_endRow++;
    } ?>
    </tr>
   <?php }?>
   </table>
   </div>

        <div id="dynamic">
         <?php //print_r($one_product); ?>
   </div>
        </div>

  <div>/div>

</div>

</div>

</body>
</html>

sneakyimp

You can either alter your foreach loop with a tiny bit of extra code to extract the first product:

$product_count = 0; // a counter that is incremented for each product
$first_product = NULL; // a var to store your first product
foreach($products as $product) {
  if ($product_count == 0) {
    $first_product = $product;
  }
  $product_count++;
  // blah blah your current code here
}

Or you can add an AJAX call to your page which fetches the first product displayed in the table.