Getting the data from database using a drop down

Question

here i have written the code for a functionality using jquery-ajax in CODEIGNITER where i need to pass the value of the drop down to the database using 'ajax post method' execute a query and get and display the results/data in the same view page using onChange, but the problem is onChange no change is visible. Please help me out on this.

view.php

<div class="col-sm-6 form-group">
                    <select class="chosen-select form-control"  name="ProductCategoryID" id="item_code" value="<?php echo set_value('ProductCategoryID'); ?>" required>
                            <option>Select Item code</option>
                            <?php 
                         foreach($itemlist as $row)
                            { 
                         echo '<option value="'.$row->ItemCode.'">'.$row->ItemCode.'</option>';
                            }
                      ?>
                          </select>
            </div>

            <div class="col-sm-12 form-group" id="description">

            </div>
<script src="<?php echo base_url("assets/js/jquery-1.10.2.js"); ?>" type="text/javascript"></script>


    <script type="text/javascript">
$('#item_code').change(function(){
    var item_code = $(this).val();
    $("#description > option").remove();
    $.ajax({
        type: "POST",
        url: "<?php echo site_url('Ajax/get_description'); ?>",
        data: {id: item_code},
        dataType: 'json',
        success:function(data){
            $.each(data,function(k, v){
                var t_area = $('<textarea />');
                t_area.val(k);
                t_area.text(v);
                $('#description').append(t_area);
            });
            $('#item_code').append('<textarea value="' + id + '">' + name + '</textarea>');
        }
    });
    $('#item_code').trigger('chosen:updated');
});
</script>

Controller.php

<?php

class Ajax extends CI_Controller {

        public function __construct()
        {
                parent::__construct();
                $this->load->helper(array('form', 'url'));
                $this->load->library(array('session', 'form_validation'));
                $this->load->database();
                $this->load->model('Gst_model');
                $this->load->model('User_model');
                $this->load->model('Report_model');

                                $this->load->helper('url');
        }

        function get_description()
    {
        $id = $this->input->post('id');
        echo(json_encode($this->Report_model->get_description($id)));
    }
}

Model.php

function get_description($item_code)
     {  
         $result = $this->db->where('ItemCode', $item_code)->get('gst_itemmaster')->result();
        $id = array('0');
        $name = array('0');
        for ($i=0; $i<count($result); $i++)
        {
            array_push($id, $result[$i]->ItemDescription);
            array_push($name, $result[$i]->ItemDescription);
        }
        return array_combine($id, $name);
    }

Answer 1

Your problem is that updating chosen-select dropdowns is a bit tricky. After you've updated your option list you have to call something like $('.my_select_box').trigger('chosen:updated'); Take a look at the chosen-select docs here .

Just put this after your ajax call at the end of your change() function:

$('#item_code').change(function(){
    var item_code = $(this).val();
    $("#description > option").remove();
    $.ajax({
        type: "POST",
        url: "<?php echo site_url('Ajax/get_description'); ?>",
        data: {id: item_code},
        dataType: 'json',
        success:function(data){
            $.each(data,function(k, v){
                var t_area = $('<textarea />');
                t_area.val(k);
                t_area.text(v);
                $('#description').append(t_area);
            });
            $('#state').append('<textarea value="' + id + '">' + name + '</option>');
        }
    });
    $('#item_code').trigger('chosen:updated');
});