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中

回答

相关问题