help: populateProvince in drop down select with jquery

[eluser]Sami Mansour[/eluser]
hey,
i faced a problem in my project, when i moved to Codeigniter Framework.
I've many drop down select used in all pages.
it is work on my own CMS but in codeigniter doesn't work!!!

View

Code:

< script type="text/javascript" src="<?php echo base_url()?>js/pages/school-search.js"></ script>
<form id="form" method="get" action="<?php echo base_url()?>searchSchools">
<table style="width:670px;">
<tr>
<td width="10%"><b>City</b></td>
<td width="40%">
<select id="city" name="city" class="city" tabindex="1">
<option value="0"></option>
&lt;?php foreach($cities->result_array() as $c): ?&gt;
<option value="&lt;?php echo $c['id'];?&gt;">&lt;?php echo $c['city_name'];?&gt;</option>
&lt;?php endforeach; ?&gt;
</select></td>

<td width="10%"><b>Province</b></td>
<td width="40%"><select id="province" name="province" class="province" tabindex="2"></select></td>
</tr>
</table>
&lt;/form&gt;

**********************************

controller

Code:

class SearchSchools extends CI_Controller {

    function __construct()
    {
        parent::__construct();
        $this->load->model('Search_schools_model');
    }

    function index()
    {
        $data['allDate'] = $this->Sidebar_model->get_Both(time());
        $data['sidebarLinks'] = $this->Sidebar_model->fetchSidebarLinks();
        //$data['weather'] = $this->Sidebar_model->fetchWeather();
        $data['cities'] = $this->Search_schools_model->getCities();
        
        $this->load->view('SearchSchools', $data);
    }
    
    function getProvinces()
    {
        $c = $_POST['city'];
        echo $this->Search_schools_model->getProvincesById($c);
    }
    
}

/* End of file searchSchools.php */
/* Location: ./application/controllers/searchSchools.php */

**********************************
model

Code:

class Search_schools_model extends CI_Model
{
    function __construct()
    {
        parent::__construct();
    }
    
    function getCities()
    {
        $this->db->order_by('id', 'ASC');
        $query = $this->db->get('cities');
        return $query;
    }
    
    function getProvincesById($data)
    {
        $options = array();
        //$options[0] = "without province";
        
        $where = array("city_id" => $data);
        //$this->db->select("province_id, province_name");
        $this->db->order_by("province_id", "asc");
        $query = $this->db->get_where("provinces", "$where");
        foreach ($query->result_array() as $row)
        {
            $options[ $row['province_id'] ] = $row['province_name'];
        }
        //$options[100000] = "other";
        echo json_encode($options);
    }
}

**********************************
in school-search.js

Code:

function populateProvince() {
    $.post("searchSchools/getProvinces", { city:$('#city').val() },function(data){
        var select = $('#province');
        //var options = select.attr('options');
        $('option', select).remove();
        $.each(data, function(val, text) {
            $('#province').append(
                $('<option></option>').val(val).html(text)
            );
        });
    }, "json");
}
$(document).ready(function() {
    populateProvince();
    $('#city').change(function() {
        populateProvince();
    });
});

when i remove (, "json") it'll appear as symbols in each option. But when (, "json") is exist there is nothing appear.

where is the problem?

Best regards