Question

Update: Got this working by disabling CodeIgniter Profiler which was interfering with the Ajax success response. I think it adds a div to the JSON response.

I am trying to populate a dependent select box with data from mysql database. The problem is that the dependent select box is not getting populated in spite of getting data in the correct format in response to Ajax request.

Please help me as I am totally clueless about what’s happening here. Below is my JavaScript code.

<script type="text/javascript">

$(document).ready(function(){
    $('#country').change(function(){ 
        $("#cities > option").remove(); 

        var form_data = {
            country: $('#country').val(),
            csrf_token_name: $.cookie("csrf_cookie_name")
        };

        $.ajax({
            type: "POST",
            url: "http://localhost/outlets/get_cities", 
            data: form_data,
            dataType : "JSON",
            success: function(cities)
            {
               $.each(cities,function(id,name)
                {
                    var opt = $('<option />'); 
                    opt.val(id);
                    opt.text(name);
                    $('#cities').append(opt); 
                });
            }

        });

    });
});
</script>

And here is the HTML. I am using Codeigniter.

<form id="form">
<?php $cities['#'] = 'Please Select'; ?>
<label for="country">Country: </label><?php echo form_dropdown('country_id', $countries, '#', 'id="country"'); ?><br />
<label for="city">City: </label><?php echo form_dropdown('city_id', $cities, '#', 'id="cities"'); ?><br />
</form>

Here is the controller:

function get_cities(){
    $country = $this->input->post('country');
  $this->load->model('city');
  header('Content-Type: application/x-json; charset=utf-8');
  echo (json_encode($this->city->get_cities($country)));
}

& the Model:

function get_cities($country = NULL){
  $this->db->select('id, name');

  if($country != NULL){
      $this->db->where('countries_id', $country);
  }
  $query = $this->db->get('cities');

  $cities = array();

  if($query->result()){
      foreach ($query->result() as $city) {
          $cities[$city->id] = $city->name;
      }
  return $cities;
  }else{
      return FALSE;
  }
}

Answer 1

Alright everyone, I managed to get this working by disabling CodeIgniter Profiler. Codeigniter profiler, that otherwise is a handy tool, breaks javascript on any page with Ajax. If you can’t do without profiler, use the solution provided on Making CodeIgniter’s Profiler AJAX compatible