Unable to create the third drop down using ajax in codeigniter - ajax

Question

I am trying to create ajax dropdown in three layers state, city and location in codeigniter 2.1.4. The first layer is working fine I am able to fetch the city list from state id but unable to fetch location from city id. I thing I am doing some mistake in the ajax I need help. My code is mentioned below:
view
<div id="innerdiv1">
<label>State</label>
<br />
<select name="state_id" id="state_id">
<option value="">-- Select State --</option>
<?php foreach ($states as $all_states): ?>
<option value="<?=$all_states['id'];?>"><?=$all_states['state'];?></option>
<?php endforeach ?>
</select>
</div>
<div id="innerdiv2">
<label>City</label>
<br />
<div id="city">
<select name="city_id" id="city_id">
<option value="">-- Select City-- </option>
</select>
</div>
</div>
<div id="innerdiv1">
<label>Location</label>
<br />
<div id="location">
<select name="location_id" id="location_id">
<option value="">-- Select Location-- </option>
</select>
</div>
</div>
Ajax
$(document).ready(function () {
$('#state_id').change(function () {
var selState = $(this).val();
console.log(selState);
$.ajax({
url: "pages/get_cities",
async: false,
type: "POST",
data: "state="+selState,
dataType: "html",
success: function(data) {
$('#city').html(data);
}
})
});
$('#city_id').change(function () {
var selCity = $(this).val();
alert(selCity);
console.log(selCity);
$.ajax({
url: "pages/get_locations",
async: false,
type: "POST",
data: "cities="+selCity,
dataType: "html",
success: function(data) {
$('#location').html(data);
}
})
});
});
</script>
city model
<?php
class City_model extends CI_Model {
public function __construct() {
$this -> load -> database();
//$this->output->enable_profiler(TRUE);
}
function get_cities($state){
if($state != NULL){
$this->db->where('state_id', $state);
$query = $this->db->get('city');
$cities = array();
$html = '';
if($query->result())
{
$html .= '<select id="city_id" name="city_id">';
$html .= '<option value="">-- Select City --</option>';
foreach ($query->result() as $city)
{
//$cities[$city->id] = $city->city;
$html .= '<option value="'.$city->id .'">'.$city->city.'</option>';
}
$html .= '</select>';
return $html;
}
else
{
return FALSE;
}
}
else
{
$html = '<option value="">--Select City--</option>';
return $html;
}
}
}
Controller
class Pages extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('home_model');
$this->load->model('sub_cat_model');
$this->load->model('state_model');
$this->load->model('city_model');
$this->load->model('location_model');
$this->load->library('email');
}
public function index()
{
$data['state'] = $this->home_model->get_state();
$data['title'] = 'Rimi Classified - Home';
$this->load->view('templates/header', $data);
$this->load->view('index', $data);
$this->load->view('templates/footer', $data);
}
public function sign_up()
{
$data['states'] = $this->state_model->get_states();
$data['error'] = '';
$data['title'] = 'Rimi Classified - Sign up';
$this->load->view('templates/header1', $data);
$this->load->view('sign-up', $data);
$this->load->view('templates/footer', $data);
}
public function get_cities()
{
$state_id = $this->input->post('state');
echo $this->city_model->get_cities($state_id);
}
public function get_locations()
{
$city_id = $this->input->post('cities');
echo $this->location_model->get_locations($city_id);
}
}

Answer 1

Replace
$('#city_id').live("change", function () {
with below code
$(document).on("change", "#city_id", function(){

Answer 2

try to add an alert statement in your first ajax call's success function. also add an error function to know that the first AJAX call is completing successfully.
Use the documentation from here to check if you've correctly implemented the AJAX model.
Jquery-Ajax