How to update div contents on 'onchange' event using Ajax and Codeigniter - ajax

Question

I am using CodeIgniter v3.1.3 on WAMP.In one of my view (our_districts.php), i have a dropdownlist containing district names:
<select class="form-control" id="ddlDist" name="ddlDist" onchange="popDistrictData();">
<option value="0">--Select--</option>
<option value="3">District A</option>
<option value="4">District B</option>
<option value="5">District C</option>
<option value="6">District D</option>
</select>
<div id="districtData"></div>
<script type="text/javascript">
function popDistrictData(){
var dist_id = document.getElementById("ddlDist").value;
$.ajax({
type: "POST",
url: "<?=site_url()?>section/ajax_call_pop_district_data/"+dist_id,
dataType: "html",
success: function(html){
$("#districtData").html(html);
}
});
}
</script>
Section Controller:
class Section extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->output->set_header('Content-Type:text/html; charset=UTF-8');
$this->load->helper("url");
$this->load->model("District_model");
}
public function view()
{
$data['section_name']='Districts';
$this->load->view('templates/site_header',$data);
$data["district_data"] = $this->District_model->pop_districts_in_combobox();
$this->load->view('our_districts',$data);
$this->load->view('templates/site_footer',$data);
}
public function ajax_call_pop_district_data()
{
if ($this->input->post('distId') !="") {
$did = $_POST['distId'];
$dist_data = $this->District_model->pop_district_data($did);
//what should i write here???.........
}
}
}
As you can see that the above dropdownlist is getting populated by 'pop_districts_in_combobox()' method of 'District_model'.On its 'onchange' event,
i want to populate the div with id=districtData using Ajax as shown above.My problem is how to fill the div(id=districtData) .Please help with some code.Thanks in advance.

Answer 1

You're in an ajax call, so that ajax should return the code that will process the jQuery $.ajax function.
In your jQuery success function code you're doing a simple $("#districtData").html(html);
So in the controller function ajax_call_pop_district_data you should do a simple echo $dist_data which should have html code generated by the model function pop_district_data.