使用ajax和codeigniter从数据库中检索信息并将其返回

Question

I have a site showing products and when you click a product you get the product details. Now every product has a few different models that are all stored in the database. So when you select an option in the selectbox all product details have to change to the according model. Problem is when i return my data its get messed up because it loads the view again. I just want the records changing dynamic on what you select.

productdetail_view

<?php foreach($productsdetail as $row) { ?>
    <div class="container">
      <ol class="breadcrumb">
  <?php echo set_breadcrumb(); ?>
</ol>
 <div class="row">
 <div class="border clearfix">
  <div class="productContainer">
    <div class="productImg">
        <img class='voorbeeldimg' src="<?php echo base_url();?>uploads/<?php echo $row->foto;  ?>" alt="">
    </div>
    </div>
    <div class="test" id="test" style="height:200px; background-color:grey;"></div>
    <div class="productInfo">
    <h2>Nordia <?php echo $row->bestelnr; ?></h2>
    <h4><?php echo $row->naam; ?></h4>
    <p><?php echo $row->beschrijving; ?></p><br/>
        <label for="modellen">Modellen</label>
    <select  name="modellen" id="selection" class="form-control">
        <option value="600X400">600X400</option>
        <option value="700X500">700X500</option>
    </select><br/>
    <p><b>Draagvermogen:</b> <?php echo $row->draagvermogen; ?>kg</p>
    <p><b>Laadvlak:</b> <?php echo $row->laadvlak; ?>mm</p>
    <p><b>Wiel:</b> <?php echo $row->wiel; ?>mm</p>
    <p><b>Eigen gewicht:</b> <?php echo $row->gewicht; ?>kg</p>
    <p><b>Bestel nr: </b><?php echo $row->bestelnr; ?></p><br/>
    <label for="aantal">Aantal</label>
    <input type="number" class="form-control" id="aantal" placeholder="Stuks">
    <h3><?php echo $row->prijs; ?> €</h3>
    <h6>Excl 21% btw</h6>

<br/>
        <p><a href="" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;Winkelwagentje</a></p>
  </div>
  </div>
  </div>
      <br/>
</div> <!-- /container -->
  <?php } ?>

Controller

function productdetail(){
        $data = array();
        $id = $this->uri->segment(5, 0);
        $data['productInfo'] = array();
        $this->load->model('Site_model');
        $title['title'] = 'Nordia - Steekkar';
        $data['productsdetail'] = $this->Site_model->get_productdetail($id);
        $this->load->view('head_view', $title);
        $this->load->view('nav_view');
        $this->load->view('productdetail_view',$data);
        $this->load->view('footer_view');
    }

    function modelopties(){
        $data = array();
        $where = array();
        $where['modellen'] = $this->input->post('modellen');
        $this->load->model('Site_model');
        $data['option'] = $this->Site_model->get_productoptions($where);
        $this->load->view('productdetail_view',$data);
    }

Model

function get_productoptions($where) {
 return $this->db->where('laadvlak')->get('tblproducts')->row();

}

ajax

<script>
    $(function(){
        $('#selection').change(function(){
             var modellen = $(this).val();
             $.ajax({
                url : 'site/modelopties',
                type : "POST",
                data : modellen,
                success : function(data){
                    $('#test').html(data);

                },
             }); 
        });
    }) 
    </script>

Answer 1

Without knowing what the errors behind "its get messed up" are, it makes it somewhat difficult to know exactly what the issue is...however, from an initial glance, your javascript function is incorrect.

Taken from http://api.jquery.com/jQuery.ajax/

The data option can contain either a query string of the form key1=value1&key2=value2 , or an object of the form {key1: 'value1', key2: 'value2'} .

At the moment you are sending just the value of modellen to the site/modelopties controller/function and as a result $this->input->post('modellen') is looking in the post array key called 'modellen' (which it obviously cannot find).

I would recommend changing your javascript function to the below:

$('#selection').change(function(){
    var modellen = $(this).val();
    $.ajax({
        url : 'site/modelopties',
        type : "POST",
        data : { modellen: modellen }, // or modellen=modellen
        success : function(data){
            $('#test').html(data);

        },
    }); 
    return false; // Prevents page from reloading
});

Hope that helps...

EDIT

Firstly, update the javascript function with return false; as this will prevent the page from reloading when you change the value of the select box.

Secondly, the current javascript function will return whatever is being output from the modelopties controller function (which in this case is the productdetail_view ). In order to just return the values of the database (not the whole view) you will need to modify your modelopties function. I would suggest creating a new view that displays just the part of the view you want to load into the #test div.

Controller

<?php
function modelopties() {
    $data = array();
    $where = array();
    $where['modellen'] = $this->input->post('modellen');
    $this->load->model('Site_model');
    $data['option'] = $this->Site_model->get_productoptions($where);
    $this->load->view('productdetail_partial_view', $data); // new view file
}
?>

View (productdetail_view_partial)

<?php
foreach ($option as $row) {
    echo $row . '<br />'; // manipulate the data however you want it to be displayed
}
?>