Jump to content

Need Help with loading dynamic content into a div using jQuery


RyanMinor

Recommended Posts

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> </td>
     <?php $sql_endRow++;
    } ?>
    </tr>
   <?php }?>
   </table>
   </div>
            
            <div id="dynamic">
             <?php //print_r($one_product); ?>
   </div>
        </div>

  <div>/div>
        
    </div>

</div>

</body>
</html>

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.