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 이벤트가 필요합니다 getOneProduct에 대한 ajax 호출. 정보가 반환되면 jquery를 사용하여 동적 div를 업데이트합니다. 상당한 양의 일. 첫 번째 기회를주고, 제대로 작동하지 않을 경우 게시하고, 추가/변경해야 할 사항을 지적 할 것입니다. –

그렇다면 고객이 div id = "dynamic"에 제품 정보를 클릭하여로드 할 수있는 링크는 ' \t \t '입니까? 죄송합니다. jQuery/Ajax를 사용하여 데이터를 새로로드합니다. – WebDev84

product()에서 POST 대신 GET에서 product_id를 가져 오면 링크가 자바 스크립트없이 작동합니다. getOneProduct에서

$product_id = $_GET['product_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>

예를 들어 자바 스크립트 (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() 메소드가 정의되지 않았다고 말하고있다. 호기심에서, Ajax가해야 할 일을 할 수 있도록하기 위해 CodeIgniter 설정 파일에서 무엇인가를 변경해야합니까? – WebDev84

그래서 product() 메소드가 호출되었지만'$ data [ 'product'] = $ this-> Category_model-> getOneProduct ($ product_id);'실패한 라인은 무엇입니까? – popthestack

getOneProduct() 메서드의 해당 문제가 해결되었습니다. 이제 엄지 손가락 중 하나를 클릭하면 화면이 공백이됩니다. 현재 작업중인 실제 페이지는 http : //digrepro.com/category/index/everyday-looks에서 볼 수 있습니다. – WebDev84

jQuery CodeIgniter를 사용하여 Div에 내용로드

답변

관련 문제