jQuery使用CodeIgniter將內容加載到Div中

我試圖從我的數據庫動態加載內容到我的視圖中稱爲動態的div。我在動態div左側有一個產品網格，當用戶點擊其中一個產品時，我希望動態div能夠填充他們點擊的產品的詳細信息。另外，我希望頁面能夠自動選擇並顯示第一個產品。我試着按照幾個教程來學習如何做到這一點，但我所做的全部都是以圈子形式運行的。任何幫助表示讚賞。我的代碼如下：jQuery使用CodeIgniter將內容加載到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>

來源

2011-12-30 WebDev84

你需要使用的一個onclick事件ajax調用getOneProduct。當信息返回時，您將使用jquery更新動態div。它的工作量很大。首先給它一個鏡頭，併發布你想出來的東西，如果你不能工作，我們會指出需要添加/更改的東西。 – 2011-12-30 16:05:37

那麼我的客戶點擊鏈接並將產品信息加載到div id =「dynamic」中的鏈接爲：' \t \t '？抱歉，我是使用jQuery/Ajax加載數據的新手。 – WebDev84 2011-12-30 18:07:30

在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); 
     } 
    }); 
});

來源

2011-12-30 17:30:37 popthestack

我的確如你所說，但現在它告訴我，我的getOneProduct（）方法是未定義的。出於好奇，我是否需要更改CodeIgniter配置文件中的任何內容，以使Ajax能夠完成它需要做的事情？ – WebDev84 2011-12-30 19:28:57

所以調用product（）方法，但'$ data ['product'] = $ this-> Category_model-> getOneProduct（$ product_id）;'line是失敗的？ – popthestack 2011-12-31 19:58:22

我修復了getOneProduct（）方法失敗的問題。現在，當我點擊其中一個拇指時，屏幕就會變成空白。我正在處理的實際頁面可以在http：//digrepro.com/category/index/everyday-looks中看到。 – WebDev84 2012-01-01 22:30:16

jQuery使用CodeIgniter將內容加載到Div中

回答

相關問題