Simple ajax drop down filtering with CodeIgniter
Rather than using pure php, when it comes to a framework, working with ajax become much tricky. Since codeigniter using inbuilt MVC architecture, we have to consider the routing pattern of the application as well.
Suppose we want to filter city names according to the selected country name. Here is how we gonna do it.
Create two tables in the database. Countries and Cities.
Countries -> 2 fields (id, country_name) ; Cities -> 3 fields(id,city_name,country_id);
Create the User controller as follows.
[sourcecode language=”php”]
<?php
class User extends CI_Controller {
public function __construct() {
parent::__construct();
$this -> load -> model(‘country_model’);
}
function Register() {
$data[‘countries’] = $this -> country_model -> get_countries();
$this -> load -> view(‘test/post_view’, $data);
}
function get_cities($country){
$this->load->model(‘city_model’);
header(‘Content-Type: application/x-json; charset=utf-8’);
echo(json_encode($this->city_model->get_cities($country)));
}
}
[/sourcecode]
Add models.
city_model.php
[sourcecode language=”php”]
<?php
class City_model extends CI_Model {
public function __construct() {
$this -> load -> database();
}
function get_cities($country = null){
$this->db->select(‘id, city_name’);
if($country != NULL){
$this->db->where(‘country_id’, $country);
}
$query = $this->db->get(‘cities’);
$cities = array();
if($query->result()){
foreach ($query->result() as $city) {
$cities[$city->id] = $city->city_name;
}
return $cities;
}else{
return FALSE;
}
}
}
?>
[/sourcecode]
country_model.php
[sourcecode language=”php”]
<?php
class Country_model extends CI_Model {
public function __construct() {
$this -> load -> database();
}
function get_countries() {
$this -> db -> select(‘id, country_name’);
$query = $this -> db -> get(‘countries’);
$countries = array();
if ($query -> result()) {
foreach ($query->result() as $country) {
$countries[$country -> id] = $country -> country_name;
}
return $countries;
} else {
return FALSE;
}
}
}
?>
[/sourcecode]
Then create the view.
[sourcecode language=”php”]
<html>
<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
$(‘#country’).change(function(){ //any select change on the dropdown with id country trigger this code
$(“#cities > option”).remove(); //first of all clear select items
var country_id = $(‘#country’).val(); // here we are taking country id of the selected one.
$.ajax({
type: “POST”,
url: “http://localhost/test/user/get_cities/"+country_id, //here we are calling our user controller and get_cities method with the country_id
success: function(cities) //we’re calling the response json array ‘cities’
{
$.each(cities,function(id,city) //here we’re doing a foeach loop round each city with id as the key and city as the value
{
var opt = $(‘<option />’); // here we’re creating a new select option with for each city
opt.val(id);
opt.text(city);
$(‘#cities’).append(opt); //here we will append these new select options to a dropdown with the id ‘cities’
});
}
});
});
});
// ]]>
</script>
</head>
<body>
<?php $countries[‘#’] = ‘Please Select’; ?>
<label for=”country”>Country: </label><?php echo form_dropdown(‘country_id’, $countries, ‘#’, ‘id=”country”’); ?><br />
<?php $cities[‘#’] = ‘Please Select’; ?>
<label for=”city”>City: </label><?php echo form_dropdown(‘city_id’, $cities, ‘#’, ‘id=”cities”’); ?><br />
</body>
</html>
[/sourcecode]
Now when you choose the country, the relevant cities are automatically filtered.
Like bellow.
country : India
City : Mumbai, Kolkatta
when you select country as Sri Lanka,
City : Colombo, Matara
