Jump to content

Need Help with loading dynamic content into a div using jQuery


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>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.