下拉列表填充表ajax codeigniter

Question

I want to make an application in ajax in codeigniter, to choose a type of product and appears a table that contains the marks the price of the product

So here is what I have done and thank you for helping me with this code. Controller:

 public function produit() { $data['listType']=$this->test_m->findtype(); return $this->load->view('produit',$data);//List of product types } public function getprod($idv) { $this->test_m->idv=$idv; $prod=$this->test_m->req_prod(); header('Content-Type: application/x-json; charset=utf-8');//to display the table echo json_encode($prod); } 

Model:

 function findtype() { $query=$this->db->get('valve'); return $query->result(); //dropdown types } function req_prod() { if(!is_null($this->idv)){ $this->db->select('taille,reference,marque,prix,quantite '); $this->db->where('idv', $this->idv); $prod = $this->db->get('produit'); // if there are suboptinos for this option... if($prod->num_rows() > 0){ $prod_arr; // Format for passing into jQuery loop foreach ($prod->result() as $option) { $prod_arr[] = $option->taille; $prod_arr[] = $option->reference; $prod_arr[] = $option->marque; $prod_arr[] = $option->prix; $prod_arr[] = $option->quantite; } return $prod_arr; } } return; } 

And view:

 <div id="ess"> <select name="vl1" id="vl1"> <option>--select valve--</option> <?php foreach($listType as $pr){?> <option value="<?php echo $pr->idv;?>"><?php echo $pr->type?></option> <?php }?> </select><br> </div> <p>Nos produits</p> <div id="pr1"> <table> <tbody> <tr id="prod"> <td><label>Produits au choix</label></td> </tr> </tbody> </table> </div> <script type="text/javascript"> $(document).ready(function(){ $('#vl1').change(function(){ //any select change on the dropdown with id options trigger this code var idvlv = $('#vl1').val(); // here we are taking option id of the selected one. $.ajax({ type: "POST", url: "/test_c/getprod/"+idvlv , //here we are calling our dropdown controller and getprod method passing the option success: function(prod) //we're calling the response json array 'suboptions' { $.each(prod,function(taille,reference,marque,prix,quantite) //here we're doing a foeach loop round each sub option with id as the key and value as the value { var opt = $('<td/>'); // here we're creating a new select option for each suboption opt.val(taille); opt.val(reference); opt.val(marque); opt.val(prix); opt.val(quantite); $('#prod').append(opt); //here we will append these new select options to a dropdown with the id 'suboptions' }); } }); }); }); </script> 

The error is Failed to load resource: the server responded with a status of 404 (Not Found) And: [Violation] Long running JavaScript task took 304ms

Answer 1

Before ajax add this.

var BASE_URL = "<?php echo base_url(); ?>";

In routes add,

$['test'] = 'controller/function';

and in ajax request,

url: BASE_URL + 'test';
data:{data:idvlv},

and in controller,

$this->input->post('data');