JQuery Загрузка контента в Div с CodeIgniter - PullRequest
Новая
       0

JQuery Загрузка контента в Div с CodeIgniter

0 голосов
/ 30 декабря 2011

Я пытаюсь динамически загружать контент из моей базы данных в div в моем представлении, называемом динамическим. У меня есть сетка продуктов слева от динамического div, и когда пользователь нажимает на один из них, я хочу, чтобы динамический div заполнялся информацией о продукте, по которому он щелкнул. Кроме того, я хотел бы, чтобы страница загружалась с первым выбранным продуктом и отображаться автоматически. Я пытался следовать нескольким учебникам о том, как это сделать, но все, что я сделал, это бегал кругами. Любая помощь приветствуется. Мой код ниже:

Контроллер (category.php): 

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

Модель (Category_model.php): 

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

Просмотр (category_view.php): 

<!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' />
[removed][removed]
[removed][removed]
[removed][removed]
[removed]
$(document).ready(function(){
 $('body').bgStretcher({
  images: ['<?php echo base_url(); ?>images/background.jpg']
 });
 $('#slideshowHolder').jqFancyTransitions({
  delay: 5000, 
  width: 483, 
  height: 573, 
 });
});
[removed]
</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>
</code>

1 Ответ

0 голосов
/ 30 декабря 2011

В product () сделайте product_id из GET вместо POST, чтобы ваши ссылки работали без JavaScript. 

$product_id = $_GET['product_id'];

В getOneProduct ($ id): 

return json_encode($result->row_array());

HTML: 

<table width="50%" cellpadding="5" id="product-grid">
<!-- snip -->
<a href="/your/url/product?product_id=<?php echo $product['product_id']; ?>" data-product-id="<?php echo $product['product_id']; ?>">
    <img src="<?php echo base_url(); ?>products/<?php echo $product['product_thumbnail']; ?>" />
</a>

пример javascript (jquery): 

$('#product-grid a').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "/your/url/product",
        data: "product_id=" + $(this).attr('data-product-id'),
        success: function(msg){
            var product_data = jQuery.parseJSON(msg);

            // do something with product_data
            $('#dynamic').html('New product: ' + product_data.product_id);
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...