Dropdown using Ajax in Codeigniter - ajax

Question

Can't find the error, it has to be with the query at "comunas" data base.
Here are the codes:
1) The 2 tables:
comunas:
comId comNombre comRegion
regiones:
regId regNombre
2) Controller:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Usuarios extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->helper('form');
$this->load->helper('url');
$this->load->model("regiones_model");
$this->load->model("comunas_model");
}
public function index_get()
{
$data['regionDrop'] = $this->getRegiones();
//loads up the view with the query results
$this->load->view('panel/usuario_agrega_view',$data);
}
public function getRegiones()
{
$this->db->select('regId,regNombre');
$this->db->from('regiones');
$query = $this->db->get();
// the query mean select cat_id,category from category
foreach($query->result_array() as $row){
$data[$row['regId']]=$row['regNombre'];
}
// the fetching data from database is return
return $data;
}
public function getComunaByRegion($regId=string)
{
$this->db->select('comId,comNombre, comRegion');
$this->db->from('comuna');
$this->db->where('comRegion',$regId);
$query = $this->db->get();
return $query->result();
}
//call to fill the second dropdown with the comunas
public function buildDropComunas()
{
//set selected country id from POST
echo $regId = $this->input->post('id',TRUE);
//run the query for the comunas we specified earlier
$districtData['districtDrop']=$this->comunas_model->getComunaByRegion($regId);
$output = null;
foreach ($districtData['districtDrop'] as $row)
{
//here we build a dropdown item line for each query result
$output .= "<option value='".$row->comNombre."'>".$row->comNombre."</option>";
}
echo $output;
}
}
3) Models: I'm not using the querys at models, I can't "touch them" for now, so I'm putting that code direct in the controller.
4) View:
<script type="text/javascript">
$(document).ready(function() {
$("#regionesDrp").change(function(){
/*dropdown post *///
$.ajax({
url:"<?php echo base_url();?>usuarios/buildDropComunas",
data: {id: $(this).val()},
type: "POST",
success:function(data){
$("#comunaDrp").html(data);
}
});
});
});
</script>
<!--country dropdown-->
<?php
echo form_dropdown('regionesDrp', $regionDrop,'','class="required" id="regionesDrp"'); ?>
I tried to follow the example from: http://www.c-sharpcorner.com/uploadfile/225740/cascading-drop-down-in-codeigniter-using-ajax/
But I have a different database (FK comId) and as I told you, I can't use a model file for this. Anyway, I tried with a region_model and comuna_model but it's the same.

Answer 1

Use append() not html()
$("#comunaDrp").append(data);

Answer 2

First of all, the function getComunaByRegion should be:
public function getComunaByRegion($comRegion=string)
{
$this->db->select('comId,comNombre');
$this->db->from('comunas');
$this->db->where('comId',$comRegion);
$query = $this->db->get();
return $query->result();
}
Plus, in the controller, the function public function buildDropComunas_post() wasn't called with POST, that was the main reason of my 404 not found.