Ajax无法在Codeigniter中工作以填充下拉列表

Question

I am trying to get city from state in dropdown using ajax in codeigniter.

I can't understand whats going wrong? Below is the code:

<?
## 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){

 header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->city_model->get_cities($state)));
  }
}

> ##country model ##

class State_model extends CI_Model {

public function __construct() {
 $this -> load -> database();

}

function get_states() {
 $query = $this->db->order_by('state', 'ASC')->get('state');


$states = array();

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

> ## city_model starts ##

<?php
class City_model extends CI_Model {

 public function __construct() {
  $this -> load -> database();
  //$this->output->enable_profiler(TRUE);

}
function get_cities($state = NULL){
  if($state != NULL){
      $this->db->where('state_id', $state);

     $query = $this->db->get('city');
     $cities = array();
     if($query->result())
     {
        foreach ($query->result() as $city) 
        {
        $cities[$city->id] = $city->city;
        }
              return $cities;
         }
     else
     {
        return FALSE;
     }
    }
    else
    {
        $cities[] = "-- Select City --";
        return $cities;
    }
 }
}


> ## view ##

  <div id="innerdiv1">
        <label>State</label>


$states['#'] = '-- Select State --';

echo form_dropdown('state_id', $states, '#', 'id=state_id');
?>
      </div>
      <div id="innerdiv2">
        <label>City</label>

<select name="city_id" id="city_id">
<option value="">-- Select City-- </option>
</select>
      </div>


> ## Ajax starts here ##

  <script type="text/javascript">// <![CDATA[
 $(document).ready(function(){
  var base_url = "<?=base_url()?>";
  $('#state_id').change(function(){ 
  $("#city_id > option").remove(); 
  var state = $('#state_id').val(); 

  $.ajax({
  type: "POST",
      url: base_url+"pages/get_cities/"+state, 

  success: function(cities) 
  {
      $.each(cities,function(id,city)
      {
      var opt = $('<option />'); 
      opt.val(id);
      opt.text(city);
          $('#city_id').append(opt); 
     });
 }
 });
});
 });
 // ]]>
</script>

Above is the code I am unable to find the error. Can anyone help me out from

this problem. csrf_protection is set as true in config.

Answer 1

You should pass CSRF name and value in javascript ajax post..

 <script>
         var csfrData = {};
         csfrData['<?php echo $this->security->get_csrf_token_name(); ?>']
                           = '<?php echo $this->security->get_csrf_hash(); ?>';
         $.ajax({
           type: "POST",
           url: base_url+"pages/get_cities/"+state, 
           data : csfrData,
           success: function(cities) 
           {
             $.each(cities,function(id,city){
                 var opt = $('<option />'); 
                 opt.val(id);
                 opt.text(city);
                 $('#city_id').append(opt); 
            });
          }
       });
       </script>

In PHP controller return will not work, please use die

 header('Content-Type: application/json; charset=utf-8');
 die(json_encode($this->city_model->get_cities($state)));

Answer 2

Change this function to

function get_cities($state = NULL){
  if($state != NULL){
      $this->db->where('state_id', $state);

     $query = $this->db->get('city');
     $cities = array();
     $html = '';
     if($query->result())
     {
        foreach ($query->result() as $city) 
        {
        $html .= '<option value="'.$city->id].'">'.$city->city.'</option>';
        }
              return $html;
         }
     else
     {
        return FALSE;
     }
    }
    else
    {
        $html = '<option value="">--Select City--</option>';
        return $html;
    }
 }
}

Answer 3

Replace your controller function with this..

public function get_cities($state){

$cities = $this->city_model->get_cities($state);

$html = '';

foreach ($cities as $k => $v)
{
  $html .= "<option value=".$k.">".$v."</option>";
}

echo $html;
}